lumencode 1.3.1 → 1.3.2

package/public/style.css

@@ -759,7 +759,7 @@ input, textarea { font-family: inherit; color: inherit; }
 /* ── Tool Calls ── */
 .tool-rank {
   display: grid;
-  grid-template-columns: 24px minmax(0, 1fr) 80px 48px;
+  grid-template-columns: 24px minmax(0, 1fr) 80px 64px;
   align-items: center;
   gap: 8px;
   margin-bottom: 12px;
@@ -770,6 +770,19 @@ input, textarea { font-family: inherit; color: inherit; }
   white-space: nowrap;
 }
 .tool-rank:last-child { margin-bottom: 0; }
+.tool-rank.has-note {
+  grid-template-columns: 24px minmax(0, 1fr) 80px 64px 90px;
+  gap: 8px 12px;
+}
+.tool-rank-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+  font-size: 11px;
+  opacity: 0.5;
+  letter-spacing: 0.08em;
+}
 
 /* ── Timeline chart ── */
 .timeline-chart { position: relative; height: 280px; }
@@ -894,6 +907,240 @@ input, textarea { font-family: inherit; color: inherit; }
 .form-input:focus, .form-textarea:focus { border-color: var(--foreground); }
 .form-hint { font-size: 12px; opacity: 0.55; margin-top: 4px; }
 
+/* ── Config Sections ── */
+.cfg-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--muted-foreground);
+  margin-bottom: 12px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border);
+}
+
+/* ── Path Tags ── */
+.path-tags {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 10px;
+  min-height: 0;
+}
+.path-tag {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: var(--input-background);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 13px;
+  color: var(--foreground);
+  transition: background 0.15s ease;
+}
+.path-tag:hover {
+  background: var(--muted);
+}
+.path-tag-icon {
+  flex-shrink: 0;
+  color: var(--accent);
+  opacity: 0.85;
+}
+.path-tag-icon svg {
+  display: block;
+}
+.path-tag-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+.path-tag-remove {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  cursor: pointer;
+  color: var(--muted-foreground);
+  background: transparent;
+  border: none;
+  padding: 0;
+  transition: all 0.15s ease;
+}
+.path-tag-remove:hover {
+  color: var(--destructive);
+  background: var(--destructive-foreground);
+}
+.path-tag-remove svg {
+  display: block;
+}
+
+/* ── Path Add Box ── */
+.path-add-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  background: transparent;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+.path-add-box:focus-within {
+  border-color: var(--ring);
+  background: var(--input-background);
+  border-style: solid;
+}
+.path-add-icon {
+  flex-shrink: 0;
+  color: var(--muted-foreground);
+  opacity: 0.6;
+  display: flex;
+  align-items: center;
+}
+.path-add-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 13px;
+  color: var(--foreground);
+  padding: 0;
+}
+.path-add-input::placeholder {
+  color: var(--muted-foreground);
+  opacity: 0.55;
+}
+.path-add-btn {
+  flex-shrink: 0;
+  padding: 5px 14px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--input-background);
+  color: var(--foreground);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.path-add-btn:hover {
+  background: var(--foreground);
+  color: var(--background);
+  border-color: var(--foreground);
+}
+
+/* ── Advanced Toggle ── */
+.cfg-advanced-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 0;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--muted-foreground);
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+.cfg-advanced-toggle:hover {
+  color: var(--foreground);
+}
+.cfg-advanced-toggle svg {
+  transition: transform 0.2s ease;
+}
+.cfg-advanced-toggle.expanded svg {
+  transform: rotate(180deg);
+}
+.cfg-advanced-body {
+  padding-top: 16px;
+}
+
+/* ── Keywords Editor ── */
+.kw-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.kw-label {
+  width: 48px;
+  flex-shrink: 0;
+  font-size: 12px;
+  font-weight: 500;
+  padding-top: 4px;
+  text-align: right;
+  opacity: 0.7;
+}
+.kw-tags {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+.kw-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--secondary);
+  font-size: 12px;
+  line-height: 1.5;
+  cursor: default;
+  transition: background 0.15s;
+}
+.kw-tag:hover { background: var(--border); }
+.kw-tag-remove {
+  cursor: pointer;
+  opacity: 0.35;
+  font-size: 14px;
+  line-height: 1;
+  margin-left: 1px;
+}
+.kw-tag-remove:hover { opacity: 0.8; }
+.kw-add-row {
+  display: flex;
+  gap: 4px;
+  margin-top: 2px;
+}
+.kw-add-input {
+  padding: 2px 8px;
+  font-size: 12px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--input-background);
+  color: var(--foreground);
+  outline: none;
+  width: 100px;
+}
+.kw-add-input:focus { border-color: var(--foreground); }
+.kw-add-btn {
+  font-size: 12px;
+  padding: 2px 8px;
+  border: 1px dashed var(--border);
+  border-radius: 4px;
+  background: none;
+  color: var(--muted-foreground);
+  cursor: pointer;
+}
+.kw-add-btn:hover { border-color: var(--foreground); color: var(--foreground); }
+.cfg-save-ok { color: #22c55e; }
+.cfg-save-err { color: var(--dest); }
+
 /* ── Work Report Content ── */
 .work-report-content {
   background: var(--card);

package/public/utils.js

@@ -47,6 +47,224 @@ export function destroyAllCharts(keys) {
   keys.forEach(destroyChart);
 }
 
+// MCP server 前缀 → 友好名映射
+const MCP_SERVER_NAMES = {
+  'mcp__Playwright': 'Playwright',
+  'mcp__context7': 'Context7',
+  'mcp__serena': 'Serena',
+  'mcp__open-websearch': 'WebSearch',
+  'mcp__mcp-deepwiki': 'DeepWiki',
+  'mcp__web_reader': 'WebReader',
+  'mcp__exa': 'Exa',
+  'mcp__codegraph': 'CodeGraph',
+};
+
+// 工具通俗备注映射表（全部工具 Tab 用）
+export const TOOL_DISPLAY_NAMES = {
+  'Bash': '执行命令',
+  'Read': '读取文件',
+  'Edit': '修改代码',
+  'Write': '创建文件',
+  'Grep': '搜索内容',
+  'Glob': '查找文件',
+  'shell_command': '执行命令(Codex)',
+  'TaskUpdate': '更新任务',
+  'TaskCreate': '创建任务',
+  'Agent': '子代理',
+  'TaskList': '查看任务',
+  'TaskOutput': '获取结果',
+  'TaskStop': '停止任务',
+  'AskUserQuestion': '询问用户',
+  'EnterPlanMode': '进入规划',
+  'ExitPlanMode': '退出规划',
+  'WebSearch': '网络搜索',
+  'WebFetch': '抓取网页',
+  'Skill': '技能调用',
+  'CronCreate': '创建定时',
+  'CronDelete': '删除定时',
+  'update_plan': '更新计划',
+  'write': '写入文件(OpenCode)',
+  'edit': '编辑文件(OpenCode)',
+  'bash': '执行命令(OpenCode)',
+  'glob': '查找文件(OpenCode)',
+  'question': '提问(OpenCode)',
+  'todowrite': '待办(OpenCode)',
+  // MCP 聚合条目
+  'Playwright': '浏览器自动化',
+  'Serena': '代码分析',
+  'Context7': '文档检索',
+  'CodeGraph': '代码图谱',
+  'DeepWiki': '知识库',
+  'WebReader': '网页阅读',
+  'Exa': '搜索引擎',
+  // OpenCode
+  'write': '写入文件(OpenCode)',
+  'edit': '编辑文件(OpenCode)',
+  'bash': '执行命令(OpenCode)',
+  'glob': '查找文件(OpenCode)',
+  'question': '提问(OpenCode)',
+  'todowrite': '待办(OpenCode)',
+  'search': '搜索(OpenCode)',
+  'fetch': '获取(OpenCode)',
+  'run': '运行(OpenCode)',
+  // MCP 聚合条目
+  'Playwright': '浏览器自动化',
+  'Serena': '代码分析',
+  'Context7': '文档检索',
+  'CodeGraph': '代码图谱',
+  'DeepWiki': '知识库',
+  'WebReader': '网页阅读',
+  'Exa': '搜索引擎',
+  'WebSearch': '网络搜索',
+  // 其他工具
+  'PowerShell': '执行命令(PS)',
+  'NotebookEdit': '编辑笔记',
+  'view_image': '查看图片',
+  'initial_instructions': '初始化指南',
+  'query_docs': '查询文档',
+  // Serena 方法兜底（实际在 all tab 中会被聚合为 Serena，但万一聚合逻辑失效时兜底）
+  'replace_symbol_body': '替换代码体',
+  'replace_content': '替换内容',
+  'insert_before_symbol': '前置插入',
+  'insert_after_symbol': '后置插入',
+  'find_symbol': '查找符号',
+  'find_declaration': '查找声明',
+  'find_referencing_symbols': '查找引用',
+  'find_implementations': '查找实现',
+  'get_symbols_overview': '符号概览',
+  'get_diagnostics_for_file': '诊断检查',
+  'get_current_config': '获取配置',
+  'activate_project': '激活项目',
+  'delete_memory': '删除记忆',
+  // Playwright 方法兜底
+  'browser_evaluate': '浏览器执行',
+  'browser_click': '浏览器点击',
+  'browser_navigate': '浏览器导航',
+  'browser_snapshot': '浏览器快照',
+  'browser_take_screenshot': '浏览器截图',
+  'browser_close': '浏览器关闭',
+  'browser_wait_for': '浏览器等待',
+  'browser_console_messages': '浏览器控制台',
+  // 其他兜底
+  'search': '搜索',
+  'fetch': '获取',
+  'run': '运行',
+};
+
+// 工具名友好化（非 MCP 工具直接返回原名）
+export function friendlyToolName(raw) {
+  for (const prefix of _sortedPrefixes) {
+    if (raw.startsWith(prefix + '__')) {
+      const method = raw.slice(prefix.length + 2);
+      return `${MCP_SERVER_NAMES[prefix]}.${method}`;
+    }
+  }
+  return raw;
+}
+
+// 按 MCP server 分组聚合工具调用：MCP 工具合并为一条，非 MCP 保持独立
+// toolsMap 格式: { name: number } 或 { name: { calls, uses } }
+// mode: 'calls' | 'uses'
+const _sortedPrefixes = Object.keys(MCP_SERVER_NAMES).sort((a, b) => b.length - a.length);
+export function aggregateToolsByServer(toolsMap, mode = 'calls') {
+  const result = {};
+  for (const [name, val] of Object.entries(toolsMap)) {
+    const count = typeof val === 'number' ? val : (val[mode] || 0);
+    let matched = false;
+    for (const prefix of _sortedPrefixes) {
+      if (name.startsWith(prefix + '__')) {
+        const displayName = MCP_SERVER_NAMES[prefix];
+        result[displayName] = (result[displayName] || 0) + count;
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) {
+      result[name] = (result[name] || 0) + count;
+    }
+  }
+  return result;
+}
+
+// 去掉 mcp__ServerName__ 前缀，只保留方法名
+export function stripMcpPrefix(raw) {
+  for (const prefix of _sortedPrefixes) {
+    if (raw.startsWith(prefix + '__')) {
+      return raw.slice(prefix.length + 2);
+    }
+  }
+  return raw;
+}
+
+// 同时聚合 calls 和 uses，返回 { name: { calls, uses } }
+export function aggregateToolsWithDualCounts(toolsMap) {
+  const result = {};
+  for (const [name, val] of Object.entries(toolsMap)) {
+    const calls = typeof val === 'number' ? val : (val.calls || 0);
+    const uses = typeof val === 'number' ? val : (val.uses || 0);
+    let matched = false;
+    for (const prefix of _sortedPrefixes) {
+      if (name.startsWith(prefix + '__')) {
+        const displayName = MCP_SERVER_NAMES[prefix] || prefix;
+        if (!result[displayName]) result[displayName] = { calls: 0, uses: 0 };
+        result[displayName].calls += calls;
+        result[displayName].uses += uses;
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) {
+      if (!result[name]) result[name] = { calls: 0, uses: 0 };
+      result[name].calls += calls;
+      result[name].uses += uses;
+    }
+  }
+  return result;
+}
+
+// MCP 工具按 server 分组，返回带 group header 的条目数组
+// mcpToolsMap 格式: { name: { calls, uses } }
+// 返回: [{ name, calls, uses, value, pct, usePct, isGroup?, groupTotal? }, ...]
+export function groupMcpByServer(mcpToolsMap) {
+  const groups = {};
+  for (const [fullName, val] of Object.entries(mcpToolsMap)) {
+    const calls = typeof val === 'number' ? val : (val.calls || 0);
+    const uses = typeof val === 'number' ? val : (val.uses || 0);
+    let server = 'Other';
+    let matched = false;
+    for (const prefix of _sortedPrefixes) {
+      if (fullName.startsWith(prefix + '__')) {
+        server = MCP_SERVER_NAMES[prefix] || prefix;
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) continue;
+    if (!groups[server]) groups[server] = { items: [], totalUses: 0 };
+    groups[server].items.push({ name: stripMcpPrefix(fullName), calls, uses });
+    groups[server].totalUses += uses;
+  }
+
+  const sortedGroups = Object.entries(groups).sort((a, b) => b[1].totalUses - a[1].totalUses);
+  const allUses = sortedGroups.flatMap(([, g]) => g.items.map(i => i.uses));
+  const maxUses = Math.max(...allUses, 1);
+
+  const result = [];
+  for (const [server, data] of sortedGroups) {
+    result.push({ name: `--- ${server} ---`, isGroup: true, groupTotal: data.totalUses });
+    for (const item of data.items.sort((a, b) => b.uses - a.uses)) {
+      result.push({
+        name: item.name,
+        calls: item.calls,
+        uses: item.uses,
+        value: item.calls,
+        pct: Math.round((item.uses / maxUses) * 100),
+      });
+    }
+  }
+  return result;
+}
+
 // 趋势箭头
 export function renderTrendArrow(elId, current, previous) {
   const el = document.getElementById(elId);