lumencode 1.3.1 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lumencode",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "LumenCode — AI 编码助手使用报告工具，从 JSONL 日志和 Git 仓库提取 AI 贡献度、效率与使用指标，支持 Web 可视化和命令行两种模式",
   "type": "module",
   "bin": {

package/public/app.js

@@ -1,5 +1,5 @@
 import { COLORS, SCENARIO_COLORS, TEXT, ID, STORAGE } from './config.js';
-import { esc, fmt, fmtShort, destroyChart, destroyAllCharts, getChart, setChart, todayISO, fmtDate } from './utils.js';
+import { esc, fmt, fmtShort, destroyChart, destroyAllCharts, getChart, setChart, todayISO, fmtDate, TOOL_DISPLAY_NAMES, groupMcpByServer, aggregateToolsWithDualCounts } from './utils.js';
 import { createLatestRequestGuard, fetchTools, fetchReport, fetchConfig, saveConfig, fetchDetails, fetchSessions, fetchStepStats, fetchHooksStatus, updateHooks } from './api.js';
 import { renderWorkTypePie, renderModelBars, renderProjectBars, renderTimelineArea, renderCacheStack } from './charts.js';
 import { renderGitInsights, renderLineBlameEvidence } from './git-insights.js';
@@ -135,6 +135,12 @@ function appState() {
       { l: 'IDLE DAYS', v: '-', s: 'no activity' },
     ],
     toolRankData: [],
+    toolRankTotal: 0,
+    toolRankTab: 'all',
+    toolRankTotalCalls: 0,
+    toolRankAllTotal: 0,
+    toolRankSkillTotal: 0,
+    toolRankMcpTotal: 0,
     projectData: [],
 
     /* tool summary for rail */
@@ -310,6 +316,66 @@ function appState() {
       if (this.view === 'report') this.loadReportContent();
     },
 
+    setToolRankTab(tab) {
+      this.toolRankTab = tab;
+      this._computeToolRank();
+      const container = document.getElementById('toolCallsContainer');
+      if (container) container.scrollTop = 0;
+    },
+
+    _computeToolRank() {
+      const usageStats = this._lastUsageStats || {};
+      const tab = this.toolRankTab;
+      const getCalls = (val) => typeof val === 'number' ? val : (val.calls || 0);
+      const getUses = (val) => typeof val === 'number' ? val : (val.uses || 0);
+      const sumCalls = (obj) => Object.values(obj || {}).reduce((s, v) => s + getCalls(v), 0);
+
+      this.toolRankAllTotal = sumCalls(usageStats.tools);
+      this.toolRankSkillTotal = sumCalls(usageStats.skills);
+      this.toolRankMcpTotal = sumCalls(usageStats.mcpTools);
+
+      if (tab === 'all') {
+        const dual = aggregateToolsWithDualCounts(usageStats.tools || {});
+        const entries = Object.entries(dual).sort((a, b) => b[1].uses - a[1].uses);
+        const maxUses = Math.max(...entries.map(([, v]) => v.uses), 1);
+        this.toolRankData = entries.map(([name, d]) => ({
+          name,
+          calls: d.calls,
+          uses: d.uses,
+          value: d.calls,
+          pct: Math.round((d.uses / maxUses) * 100),
+          displayName: TOOL_DISPLAY_NAMES[name] || '',
+        }));
+        this.toolRankTotalCalls = this.toolRankAllTotal;
+      } else if (tab === 'skill') {
+        const skills = usageStats.skills || {};
+        const entries = Object.entries(skills).sort((a, b) => getUses(b[1]) - getUses(a[1]));
+        const maxUses = Math.max(...entries.map(([, v]) => getUses(v)), 1);
+        this.toolRankData = entries.map(([name, val]) => {
+          const calls = getCalls(val);
+          const uses = getUses(val);
+          return {
+            name,
+            calls,
+            uses,
+            value: calls,
+            pct: Math.round((uses / maxUses) * 100),
+            displayName: '',
+          };
+        });
+        this.toolRankTotalCalls = this.toolRankSkillTotal;
+      } else if (tab === 'mcp') {
+        this.toolRankData = groupMcpByServer(usageStats.mcpTools || {});
+        this.toolRankTotalCalls = this.toolRankMcpTotal;
+      }
+
+      this.toolRankTotal = this.toolRankData.length;
+      let rank = 0;
+      for (const item of this.toolRankData) {
+        if (!item.isGroup) item.rank = ++rank;
+      }
+    },
+
     /* ── period / date ── */
     setPeriod(p) {
       this.period = p;
@@ -433,6 +499,7 @@ function appState() {
     /* ── render data ── */
     renderData(data) {
       const { usageStats, gitStats, start, end, prevStats, trendData, costBreakdown } = data;
+      this._lastUsageStats = usageStats;
       this.hasData = usageStats.requestCount > 0;
       if (!this.hasData) {
         this.kpiData = [
@@ -526,9 +593,7 @@ function appState() {
       this.projectData = projEntries.map(([name, d]) => ({ name: name.length > 20 ? '...' + name.slice(-17) : name, value: d.requests }));
 
       /* Tool rank */
-      const toolEntries = Object.entries(usageStats.tools || {}).sort((a, b) => b[1] - a[1]).slice(0, 10);
-      const maxTool = Math.max(...toolEntries.map(([, v]) => v), 1);
-      this.toolRankData = toolEntries.map(([name, value]) => ({ name, value, pct: Math.round((value / maxTool) * 100) }));
+      this._computeToolRank();
 
       /* Tool rail tokens — only refresh sidebar when viewing all tools */
       if (this.activeTool === 'all') {
@@ -881,19 +946,167 @@ function showToast(msg) {
 }
 
 /* ── Settings Modal ── */
+const SCENARIO_LABELS = { coding: '编码', testing: '测试', debugging: '调试', documentation: '文档', review: '审查', planning: '规划', refactoring: '重构' };
+
+function renderKeywordsEditor(keywords) {
+  const container = document.getElementById('cfgKeywordsEditor');
+  if (!container) return;
+  container.innerHTML = '';
+  for (const [key, label] of Object.entries(SCENARIO_LABELS)) {
+    const words = keywords[key] || [];
+    const row = document.createElement('div');
+    row.className = 'kw-row';
+    row.dataset.key = key;
+
+    const lbl = document.createElement('div');
+    lbl.className = 'kw-label';
+    lbl.textContent = label;
+
+    const tags = document.createElement('div');
+    tags.className = 'kw-tags';
+    for (const w of words) tags.appendChild(makeKwTag(w));
+
+    const addWrap = document.createElement('div');
+    addWrap.className = 'kw-add-row';
+    const addBtn = document.createElement('button');
+    addBtn.className = 'kw-add-btn';
+    addBtn.textContent = '+';
+    addBtn.title = '添加关键词';
+    addBtn.onclick = () => {
+      addWrap.innerHTML = '';
+      const inp = document.createElement('input');
+      inp.className = 'kw-add-input';
+      inp.placeholder = '关键词';
+      const ok = document.createElement('button');
+      ok.className = 'kw-add-btn';
+      ok.textContent = '确定';
+      ok.onclick = () => {
+        const v = inp.value.trim();
+        if (v && !tags.querySelector('[data-word="' + CSS.escape(v) + '"]')) tags.insertBefore(makeKwTag(v), addWrap);
+        resetAddBtn();
+      };
+      inp.onkeydown = (e) => { if (e.key === 'Enter') ok.click(); if (e.key === 'Escape') resetAddBtn(); };
+      addWrap.appendChild(inp);
+      addWrap.appendChild(ok);
+      inp.focus();
+    };
+    function resetAddBtn() { addWrap.innerHTML = ''; addWrap.appendChild(addBtn); }
+    resetAddBtn();
+
+    row.appendChild(lbl);
+    row.appendChild(tags);
+    row.appendChild(addWrap);
+    container.appendChild(row);
+  }
+}
+
+function makeKwTag(word) {
+  const tag = document.createElement('span');
+  tag.className = 'kw-tag';
+  tag.dataset.word = word;
+  tag.textContent = word;
+  const x = document.createElement('span');
+  x.className = 'kw-tag-remove';
+  x.textContent = '×';
+  x.onclick = () => tag.remove();
+  tag.appendChild(x);
+  return tag;
+}
+
+function collectKeywordsFromEditor() {
+  const result = {};
+  const container = document.getElementById('cfgKeywordsEditor');
+  if (!container) return result;
+  for (const row of container.querySelectorAll('.kw-row')) {
+    const key = row.dataset.key;
+    const words = Array.from(row.querySelectorAll('.kw-tag')).map(t => t.dataset.word);
+    if (words.length > 0) result[key] = words;
+  }
+  // 清洗校验：先 trim 再去重、过滤空串、截断超长词、过滤控制字符
+  for (const [key, words] of Object.entries(result)) {
+    result[key] = [...new Set(words.map(w => w.trim()))]
+      .filter(w => w.length > 0 && w.length <= 50)
+      .filter(w => !/[\x00-\x1f\x7f]/.test(w));
+  }
+  return result;
+}
+
+window.closeSettings = () => {
+  const modal = document.getElementById('settingsModal');
+  if (modal) modal.style.display = 'none';
+};
+
+/* ── Advanced Section Toggle ── */
+window.toggleKeywordsSection = () => {
+  const section = document.getElementById('cfgKeywordsSection');
+  const btn = document.getElementById('cfgKeywordsToggle');
+  if (!section || !btn) return;
+  const isHidden = section.style.display === 'none';
+  section.style.display = isHidden ? 'block' : 'none';
+  btn.classList.toggle('expanded', isHidden);
+};
+
+/* ── Path Tag Editor ── */
+const FOLDER_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';
+const CLOSE_ICON = '<svg width="12" height="12" 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>';
+
+function renderPathTags(containerId, paths) {
+  const container = document.getElementById(containerId);
+  if (!container) return;
+  container.innerHTML = '';
+  for (let i = 0; i < paths.length; i++) {
+    const tag = document.createElement('div');
+    tag.className = 'path-tag';
+    tag.innerHTML = `
+      <span class="path-tag-icon">${FOLDER_ICON}</span>
+      <span class="path-tag-text" title="${esc(paths[i])}">${esc(paths[i])}</span>
+      <button class="path-tag-remove" onclick="removePathTag('${containerId}', ${i})" title="删除">${CLOSE_ICON}</button>
+    `;
+    container.appendChild(tag);
+  }
+}
+
+function addPathTag(containerId, inputId) {
+  const input = document.getElementById(inputId);
+  const container = document.getElementById(containerId);
+  if (!input || !container) return;
+  const raw = input.value.trim();
+  if (!raw) return;
+  // 支持粘贴多行或多逗号分隔的内容，一次性解析添加
+  const paths = raw.split(/[,，\n\r]+/).map(s => s.trim()).filter(Boolean);
+  const existing = getPathTags(containerId);
+  for (const p of paths) {
+    if (!existing.includes(p)) existing.push(p);
+  }
+  renderPathTags(containerId, existing);
+  input.value = '';
+  input.focus();
+}
+
+function removePathTag(containerId, index) {
+  const paths = getPathTags(containerId);
+  paths.splice(index, 1);
+  renderPathTags(containerId, paths);
+}
+
+function getPathTags(containerId) {
+  const container = document.getElementById(containerId);
+  if (!container) return [];
+  return Array.from(container.querySelectorAll('.path-tag-text')).map(el => el.textContent);
+}
+
 window.openSettings = async () => {
   const modal = document.getElementById('settingsModal');
+  const hint = document.getElementById('cfgSaveHint');
+  if (hint) { hint.textContent = ''; hint.className = ''; }
   if (modal) modal.style.display = 'flex';
   try {
     const cfg = await fetchConfig();
     const dirEl = document.getElementById('cfgClaudeDir');
-    const reposEl = document.getElementById('cfgRepos');
-    const excludeEl = document.getElementById('cfgExclude');
-    const kwEl = document.getElementById('cfgKeywords');
     if (dirEl) dirEl.value = cfg.claudeDir || '';
-    if (reposEl) reposEl.value = (cfg.repos || []).join('\n');
-    if (excludeEl) excludeEl.value = (cfg.excludeProjects || []).join('\n');
-    if (kwEl) kwEl.value = cfg.scenarioKeywords ? JSON.stringify(cfg.scenarioKeywords, null, 2) : '{}';
+    renderPathTags('cfgReposTags', cfg.repos || []);
+    renderPathTags('cfgExcludeTags', cfg.excludeProjects || []);
+    renderKeywordsEditor(cfg.scenarioKeywords || {});
   } catch (err) {
     showToast('加载配置失败: ' + err.message);
   }
@@ -914,19 +1127,21 @@ document.getElementById('welcomeStartBtn')?.addEventListener('click', async () =
 });
 
 window.saveSettings = async () => {
-  let scenarioKeywords;
-  try { scenarioKeywords = JSON.parse(document.getElementById('cfgKeywords').value); } catch { showToast('场景关键词 JSON 格式错误'); return; }
+  const hint = document.getElementById('cfgSaveHint');
+  const scenarioKeywords = collectKeywordsFromEditor();
   const payload = {
     claudeDir: document.getElementById('cfgClaudeDir').value.trim(),
-    repos: document.getElementById('cfgRepos').value.split('\n').map(s => s.trim()).filter(Boolean),
-    excludeProjects: document.getElementById('cfgExclude').value.split('\n').map(s => s.trim()).filter(Boolean),
+    repos: getPathTags('cfgReposTags'),
+    excludeProjects: getPathTags('cfgExcludeTags'),
     scenarioKeywords,
   };
   try {
     await saveConfig(payload);
-    document.getElementById('settingsModal').style.display = 'none';
-    window.location.reload();
-  } catch (err) { showToast('保存失败: ' + err.message); }
+    if (hint) { hint.textContent = '配置已保存'; hint.className = 'cfg-save-ok'; }
+    setTimeout(() => window.location.reload(), 1200);
+  } catch (err) {
+    if (hint) { hint.textContent = '保存失败: ' + err.message; hint.className = 'cfg-save-err'; }
+  }
 };
 
 /* ── Drill-down global handler ── */

package/public/config.js

@@ -30,6 +30,7 @@ export const SCENARIO_COLORS = {
   '阅读/研究': '#9878d0',
   '规划/设计': '#d49060',
   '代码审查': '#60b8b8',
+  '重构': '#7c6fae',
   '其他': '#989898',
 };
 

package/public/export.js

@@ -1,6 +1,10 @@
 import { TEXT } from './config.js';
 import { esc, fmt, fmtShort, getChart } from './utils.js';
 
+// 工具调用值兼容：{name: number} 或 {name: {calls, uses}}
+const toolCalls = (v) => typeof v === 'number' ? v : (v.calls || 0);
+const toolUses = (v) => typeof v === 'number' ? v : (v.uses || 0);
+
 // ── CSV 导出 ──
 export function exportCSV(data, period) {
   if (!data) return;
@@ -73,11 +77,11 @@ export function exportCSV(data, period) {
     lines.push('');
   }
 
-  const toolEntries = Object.entries(usageStats.tools).sort((a, b) => b[1] - a[1]);
+  const toolEntries = Object.entries(usageStats.tools).sort((a, b) => toolCalls(b[1]) - toolCalls(a[1]));
   if (toolEntries.length > 0) {
     lines.push('# 工具使用');
-    lines.push('工具,调用次数');
-    for (const [name, count] of toolEntries) lines.push(`${name},${count}`);
+    lines.push('工具,调用次数,使用次数');
+    for (const [name, val] of toolEntries) lines.push(`${name},${toolCalls(val)},${toolUses(val)}`);
     lines.push('');
   }
 
@@ -121,7 +125,7 @@ export function printReport(data, period) {
 
   const projRows = Object.entries(usageStats.projects).sort((a, b) => b[1].requests - a[1].requests).map(([n, d]) => [n, d.requests, d.sessions instanceof Set ? d.sessions.size : (d.sessions || 0)]);
   const modelRows = Object.entries(usageStats.models).sort((a, b) => b[1].count - a[1].count).map(([n, d]) => [n, d.count, fmtShort(d.inputTokens), fmtShort(d.outputTokens)]);
-  const toolRows = Object.entries(usageStats.tools).sort((a, b) => b[1] - a[1]).slice(0, 10).map(([n, c]) => [n, c]);
+  const toolRows = Object.entries(usageStats.tools).sort((a, b) => toolCalls(b[1]) - toolCalls(a[1])).slice(0, 10).map(([n, v]) => [n, toolCalls(v), toolUses(v)]);
   const scenarioRows = Object.entries(usageStats.scenarios).sort((a, b) => b[1] - a[1]).map(([n, c]) => [n, c]);
 
   const html = `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Claude Code 使用${periodName}</title>
@@ -156,7 +160,7 @@ th{font-weight:600;background:#f8f9fa}
 </div>
 ${printTable('项目分布', ['项目', '请求数', '会话数'], projRows)}
 ${printTable('模型分布', ['模型', '请求数', '输入', '输出'], modelRows)}
-${printTable('工具使用排行', ['工具', '调用次数'], toolRows)}
+${printTable('工具使用排行', ['工具', '调用次数', '使用次数'], toolRows)}
 ${printTable('场景分布', ['场景', '请求数'], scenarioRows)}
 ${gitStats && gitStats.commits > 0 ? printTable('Git 代码产出', ['指标', '数值'], (() => {
   const rows = [['提交次数', gitStats.commits], ['新增行数', '+' + fmt(gitStats.linesAdded)], ['删除行数', '-' + fmt(gitStats.linesDeleted)], ['变更文件', gitStats.filesChanged]];
@@ -229,7 +233,7 @@ export function exportHTML(data, period) {
 
   const projRows = Object.entries(usageStats.projects).sort((a, b) => b[1].requests - a[1].requests).map(([n, d]) => [n, d.requests, d.sessions instanceof Set ? d.sessions.size : (d.sessions || 0)]);
   const modelRows = Object.entries(usageStats.models).sort((a, b) => b[1].count - a[1].count).map(([n, d]) => [n, d.count, fmtShort(d.inputTokens), fmtShort(d.outputTokens), d.cost ? '$' + d.cost.toFixed(2) : '-']);
-  const toolRows = Object.entries(usageStats.tools).sort((a, b) => b[1] - a[1]).slice(0, 10).map(([n, c]) => [n, c]);
+  const toolRows = Object.entries(usageStats.tools).sort((a, b) => toolCalls(b[1]) - toolCalls(a[1])).slice(0, 10).map(([n, v]) => [n, toolCalls(v), toolUses(v)]);
   const scenarioRows = Object.entries(usageStats.scenarios).sort((a, b) => b[1] - a[1]).map(([n, c]) => [n, c]);
 
   const html = `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>AI 编码助手使用${periodName}</title>
@@ -264,7 +268,7 @@ th{font-weight:600;background:#f8f9fa}
 </div>
 ${printTable('项目分布', ['项目', '请求数', '会话数'], projRows)}
 ${printTable('模型分布', ['模型', '请求数', '输入', '输出', '费用'], modelRows)}
-${printTable('工具使用排行', ['工具', '调用次数'], toolRows)}
+${printTable('工具使用排行', ['工具', '调用次数', '使用次数'], toolRows)}
 ${printTable('场景分布', ['场景', '请求数'], scenarioRows)}
 ${data.costBreakdown?.models?.length ? printTable('模型费用', ['模型', '费用', '计费方式', '请求数'], data.costBreakdown.models.map(m => [m.name, '$' + (m.cost || 0).toFixed(2), m.mode === 'actual' ? '实际' : m.mode === 'estimated' ? '估算' : '未知', m.requests])) : ''}
 ${gitStats && gitStats.commits > 0 ? printTable('Git 代码产出', ['指标', '数值'], [['提交次数', gitStats.commits], ['新增行数', '+' + fmt(gitStats.linesAdded)], ['删除行数', '-' + fmt(gitStats.linesDeleted)], ['变更文件', gitStats.filesChanged]]) : ''}

package/public/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
   <meta charset="UTF-8">
@@ -509,15 +509,31 @@
                 <h2 class="section-head-title">工具调用排行</h2>
                 <span class="label section-head-en">/ TOOL CALLS</span>
                 <span class="section-head-line"></span>
+                <div style="display:flex;align-items:center;gap:8px;margin-left:auto;">
+                  <div style="display:flex;gap:0;border:1px solid var(--border);border-radius:4px;overflow:hidden;">
+                    <button class="period-btn" :class="toolRankTab === 'all' ? 'active' : ''" @click="setToolRankTab('all')" style="border:none;font-size:10px;padding:2px 8px;" x-text="'全部 ' + toolRankAllTotal"></button>
+                    <button class="period-btn" :class="toolRankTab === 'skill' ? 'active' : ''" @click="setToolRankTab('skill')" style="border:none;font-size:10px;padding:2px 8px;" x-text="'Skill ' + toolRankSkillTotal"></button>
+                    <button class="period-btn" :class="toolRankTab === 'mcp' ? 'active' : ''" @click="setToolRankTab('mcp')" style="border:none;font-size:10px;padding:2px 8px;" x-text="'MCP ' + toolRankMcpTotal"></button>
+                  </div>
+                </div>
               </div>
               <div class="card" style="padding:24px;">
-                <div id="toolCallsContainer" style="display:flex;flex-direction:column;gap:12px;">
-                  <template x-for="(t, i) in toolRankData" :key="t.name">
-                    <div class="tool-rank">
-                      <span class="font-mono" style="font-size:10px;opacity:0.4" x-text="String(i+1).padStart(2,'0')"></span>
-                      <span class="font-mono" style="font-size:12px" x-text="t.name"></span>
-                      <div class="bar-track"><div class="bar-fill" :style="'width:' + t.pct + '%;background:' + (i === 0 ? colors.rust : 'var(--foreground)')"></div></div>
-                      <span class="font-mono text-right" style="font-size:11px" x-text="t.value"></span>
+                <div id="toolCallsContainer" style="display:flex;flex-direction:column;gap:12px;max-height:420px;overflow-y:auto;padding-right:4px;">
+                  <template x-for="(t, i) in toolRankData" :key="toolRankTab + '-' + t.name + '-' + i">
+                    <div style="display:contents">
+                      <!-- MCP 分组行 -->
+                      <div x-show="t.isGroup" class="tool-rank-group">
+                        <span class="font-mono" x-text="t.name"></span>
+                      </div>
+                      <!-- 普通排行行 -->
+                      <div x-show="!t.isGroup" class="tool-rank" :class="toolRankTab === 'all' ? 'has-note' : ''">
+                        <span class="font-mono" style="font-size:10px;opacity:0.4" x-text="String(t.rank || (i+1)).padStart(2,'0')"></span>
+                        <span class="font-mono" style="font-size:12px" x-text="t.name" :title="t.name"></span>
+                        <div class="bar-track"><div class="bar-fill" :style="'width:' + t.pct + '%;background:' + (t.rank === 1 ? colors.rust : 'var(--foreground)')"></div></div>
+                        <span class="font-mono text-right" style="font-size:11px" x-text="t.calls === t.uses ? t.calls : t.calls + '/' + t.uses" :title="t.calls === t.uses ? '使用次数：' + t.calls : '调用次数 / 使用次数：' + t.calls + ' / ' + t.uses"></span>
+                        <!-- 通俗备注（仅全部工具 Tab）-->
+                        <span x-show="toolRankTab === 'all' && t.displayName" style="font-size:11px;opacity:0.45;white-space:nowrap;" x-text="t.displayName"></span>
+                      </div>
                     </div>
                   </template>
                 </div>
@@ -546,6 +562,7 @@
             <div style="display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;">
               <button class="period-btn" :class="reportLevel === 'detailed' ? 'active' : ''" @click="setReportLevel('detailed')" style="border-left:none">详细 Detail</button>
               <button class="period-btn" :class="reportLevel === 'brief' ? 'active' : ''" @click="setReportLevel('brief')">简略 Brief</button>
+              <button class="period-btn" :class="reportLevel === 'boss' ? 'active' : ''" @click="setReportLevel('boss')">汇报 Boss</button>
             </div>
             <button class="btn btn-outline" @click="copyReport()" style="display:inline-flex;align-items:center;gap:6px;">
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
@@ -713,21 +730,64 @@
 
   <!-- ── Settings Modal ── -->
   <div id="settingsModal" class="modal-overlay" style="display:none;">
-    <div class="modal-backdrop" onclick="document.getElementById('settingsModal').style.display='none'"></div>
-    <div class="modal-panel">
+    <div class="modal-backdrop" onclick="closeSettings()"></div>
+    <div class="modal-panel" style="max-width:580px;">
       <div class="modal-header">
         <h3 style="font-size:15px;font-weight:500;">配置</h3>
-        <button class="rail-btn-icon" onclick="document.getElementById('settingsModal').style.display='none'" style="color:var(--foreground);opacity:0.65;">
+        <button class="rail-btn-icon" onclick="closeSettings()" style="color:var(--foreground);opacity:0.65;">
           <svg width="16" height="16" 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>
       <div class="modal-body">
-        <div class="form-group"><label class="form-label">Claude 日志目录</label><input type="text" id="cfgClaudeDir" class="form-input"></div>
-        <div class="form-group"><label class="form-label">本地项目路径（每行一个）</label><textarea id="cfgRepos" class="form-textarea" rows="3"></textarea></div>
-        <div class="form-group"><label class="form-label">排除项目（每行一个）</label><textarea id="cfgExclude" class="form-textarea" rows="3"></textarea></div>
-        <div class="form-group"><label class="form-label">场景关键词</label><textarea id="cfgKeywords" class="form-textarea" rows="5"></textarea><p class="form-hint">JSON 格式，如 { "coding": ["实现", "开发"] }</p></div>
+        <!-- 数据源 -->
+        <div class="cfg-section-title">数据源</div>
+        <div class="form-group">
+          <label class="form-label">Claude 日志目录</label>
+          <input type="text" id="cfgClaudeDir" class="form-input" placeholder="例如: C:/Users/xxx/.claude">
+          <p class="form-hint">Claude Code 会话日志的存放路径，通常是 ~/.claude</p>
+        </div>
+        <!-- 代码仓库 -->
+        <div class="cfg-section-title" style="margin-top:28px;">代码仓库</div>
+        <div class="form-group">
+          <label class="form-label">项目路径</label>
+          <div id="cfgReposTags" class="path-tags"></div>
+          <div class="path-add-box">
+            <span class="path-add-icon">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+            </span>
+            <input type="text" id="cfgReposInput" class="path-add-input" placeholder="粘贴或输入绝对路径..." onkeydown="if(event.key==='Enter')addPathTag('cfgReposTags','cfgReposInput')">
+            <button class="path-add-btn" onclick="addPathTag('cfgReposTags','cfgReposInput')">添加</button>
+          </div>
+          <p class="form-hint">按回车或点击添加，路径可单独删除</p>
+        </div>
+        <div class="form-group">
+          <label class="form-label">排除项目 <span style="opacity:0.4;font-weight:400;">（可选）</span></label>
+          <div id="cfgExcludeTags" class="path-tags"></div>
+          <div class="path-add-box">
+            <span class="path-add-icon">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+            </span>
+            <input type="text" id="cfgExcludeInput" class="path-add-input" placeholder="输入要排除的项目名..." onkeydown="if(event.key==='Enter')addPathTag('cfgExcludeTags','cfgExcludeInput')">
+            <button class="path-add-btn" onclick="addPathTag('cfgExcludeTags','cfgExcludeInput')">添加</button>
+          </div>
+          <p class="form-hint">按回车或点击添加，项目名称可单独删除</p>
+        </div>
+        <!-- 场景分类（默认折叠） -->
+        <div style="margin-top:28px;">
+          <button id="cfgKeywordsToggle" class="cfg-advanced-toggle" onclick="toggleKeywordsSection()">
+            <span>场景分类</span>
+            <svg id="cfgKeywordsArrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+          </button>
+          <div id="cfgKeywordsSection" class="cfg-advanced-body" style="display:none;">
+            <p class="form-hint" style="margin-bottom:12px;">根据工具调用中的关键词自动判断工作场景，点击可编辑</p>
+            <div id="cfgKeywordsEditor"></div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <span id="cfgSaveHint" style="font-size:12px;margin-right:auto;"></span>
+        <button class="btn btn-primary" onclick="saveSettings()">保存配置</button>
       </div>
-      <div class="modal-footer"><button class="btn btn-primary" onclick="saveSettings()">保存</button></div>
     </div>
   </div>
 
@@ -795,3 +855,4 @@
   <script type="module" src="/app.js"></script>
 </body>
 </html>
+