cc-viewer 1.6.348 → 1.7.1

package/src/utils/skillModalController.js

@@ -0,0 +1,111 @@
+// Skill 管理弹窗的「开关 / 永久删除」共享控制器。
+// AppHeader 与 Mobile 是同形态的类组件（同样的 state._skillsModal / state._fsSkills、
+// this.setState、this.reloadFsSkills()），原本各持一份逐字相同的 handler，极易漂移
+// （评审已发现 Mobile 漏了一条镜像注释）。这里抽成以组件实例为 host 的纯函数，两端只留一行委派。
+// ImSkillsModal 是函数组件 + IM 端点 + _tr 文案，状态形态不同，刻意不并入。
+import { message } from 'antd';
+import { apiUrl } from './apiUrl';
+import { t } from '../i18n';
+import { skillKey, skillOrderKey } from './skillsParser';
+
+// 把 reload 的权威结果按当前显示顺序（skillOrderKey 保位）合并回 _skillsModal.skills。
+// skillOrderKey 只取 source+name（开关/删除都不改它），所以行原地不动；modal 没见过的新条目排末尾。
+export function mergePreservingOrder(prevSkills, resultSkills) {
+  const orderMap = new Map(prevSkills.map((s, i) => [skillOrderKey(s), i]));
+  return [...resultSkills].sort((a, b) => {
+    const ai = orderMap.get(skillOrderKey(a));
+    const bi = orderMap.get(skillOrderKey(b));
+    if (ai === undefined && bi === undefined) return 0;
+    if (ai === undefined) return 1;
+    if (bi === undefined) return -1;
+    return ai - bi;
+  });
+}
+
+// 切换 skill 启用状态：乐观翻 Switch + 失败回滚 + reload 保位对齐。
+export async function handleSkillToggle(host, skill) {
+  const key = skillKey(skill);
+  if (host.state._skillsModal?.toggling?.has(key)) return;
+  const enable = !skill.enabled;
+  // 用 skillKey（含 path）匹配——同名同 source 的重复两份路径不同，只翻被点那行，不牵连孪生。
+  const flipEnabled = (target) => (s) => (skillKey(s) === key) ? { ...s, enabled: target } : s;
+  host.setState(prev => {
+    const next = new Set(prev._skillsModal.toggling); next.add(key);
+    return { _skillsModal: { ...prev._skillsModal, toggling: next, skills: prev._skillsModal.skills.map(flipEnabled(enable)) } };
+  });
+  try {
+    const r = await fetch(apiUrl('/api/skills/toggle'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ source: skill.source, name: skill.name, enable }),
+    });
+    const data = await r.json();
+    if (!r.ok) {
+      host.setState(prev => ({ _skillsModal: { ...prev._skillsModal, skills: prev._skillsModal.skills.map(flipEnabled(!enable)) } }));
+      if (data.code === 'DUPLICATE') message.error(t('ui.skillToggleDuplicate', { name: skill.name }));
+      else message.error(t('ui.skillToggleFailed', { reason: data.error || 'unknown' }));
+      return;
+    }
+    // 乐观翻 _fsSkills（popover chip 源）里这条的 enabled——reload 失败也能立即反映用户动作；
+    // reload 成功会用权威数据覆盖。
+    host.setState(prev => ({
+      _fsSkills: Array.isArray(prev._fsSkills)
+        ? prev._fsSkills.map(s => (skillKey(s) === key) ? { ...s, enabled: enable } : s)
+        : prev._fsSkills,
+    }));
+    const result = await host.reloadFsSkills();
+    if (result.ok) {
+      host.setState(prev => ({ _skillsModal: { ...prev._skillsModal, skills: mergePreservingOrder(prev._skillsModal.skills, result.skills) } }));
+    }
+  } catch (e) {
+    host.setState(prev => ({ _skillsModal: { ...prev._skillsModal, skills: prev._skillsModal.skills.map(flipEnabled(!enable)) } }));
+    message.error(t('ui.skillToggleFailed', { reason: e.message }));
+  } finally {
+    host.setState(prev => {
+      const next = new Set(prev._skillsModal.toggling); next.delete(key);
+      return { _skillsModal: { ...prev._skillsModal, toggling: next } };
+    });
+  }
+}
+
+// 永久删除单个 skill：成功后乐观移除该行 + reload 保位对齐。
+// reload 合并回 _skillsModal.skills 很关键：否则删掉「重复对」其中一份后，存活那行仍带旧
+// duplicate ⚠ 徽标，要等关弹窗重开才消失（listSkills 重算后该标记自然清掉）。
+export async function handleSkillDelete(host, skill) {
+  const key = skillKey(skill);
+  // 复用 toggling Set 作「该行操作进行中」标记：防二次确认后的连点重入，
+  // 并让 SkillsManagerModal 在删除期间给删除按钮转圈 + 禁用同行 Switch（与 toggle 一致的忙态反馈）。
+  if (host.state._skillsModal?.toggling?.has(key)) return;
+  host.setState(prev => {
+    const next = new Set(prev._skillsModal.toggling); next.add(key);
+    return { _skillsModal: { ...prev._skillsModal, toggling: next } };
+  });
+  try {
+    const r = await fetch(apiUrl('/api/skills/delete'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ source: skill.source, name: skill.name, enabled: skill.enabled }),
+    });
+    const data = await r.json().catch(() => ({}));
+    if (!r.ok) {
+      message.error(t('ui.skillDeleteFailed', { reason: data.error || 'unknown' }));
+      return;
+    }
+    message.success(t('ui.skillDeleteSuccess', { name: skill.name }));
+    host.setState(prev => ({
+      _skillsModal: { ...prev._skillsModal, skills: (prev._skillsModal.skills || []).filter(s => skillKey(s) !== key) },
+      _fsSkills: Array.isArray(prev._fsSkills) ? prev._fsSkills.filter(s => skillKey(s) !== key) : prev._fsSkills,
+    }));
+    const result = await host.reloadFsSkills();
+    if (result.ok) {
+      host.setState(prev => ({ _skillsModal: { ...prev._skillsModal, skills: mergePreservingOrder(prev._skillsModal.skills, result.skills) } }));
+    }
+  } catch (e) {
+    message.error(t('ui.skillDeleteFailed', { reason: e.message }));
+  } finally {
+    host.setState(prev => {
+      const next = new Set(prev._skillsModal.toggling); next.delete(key);
+      return { _skillsModal: { ...prev._skillsModal, toggling: next } };
+    });
+  }
+}

package/src/utils/skillsParser.js

@@ -0,0 +1,116 @@
+// Claude Code 硬编码的 builtin skill 名单（本地无文件、不可禁用）。
+// 与 server/lib/skills-api.js 的 BUILTIN_NAMES 保持一致；前端用于 popover chip 过滤。
+export const BUILTIN_SKILL_NAMES = new Set([
+  'update-config', 'keybindings-help', 'simplify', 'fewer-permission-prompts',
+  'loop', 'schedule', 'claude-api', 'init', 'review', 'security-review',
+]);
+
+// 把 /api/skills 返回的 skill 对象映射到 Claude Code system-reminder 里的显示名。
+// 插件 skill: `<pluginShort>:<skillDir>`；其它源用裸名。pluginName 形如 `short@marketplace`。
+export function skillToDisplayName(s) {
+  if (!s || typeof s.name !== 'string') return '';
+  if (s.source === 'plugin' && typeof s.pluginName === 'string' && s.pluginName.includes('@')) {
+    const short = s.pluginName.split('@')[0];
+    if (short) return `${short}:${s.name}`;
+  }
+  return s.name;
+}
+
+// Skill 的稳定唯一标识——用于开关弹窗的 toggling Set key、乐观更新匹配、reload 排序 orderMap、
+// 以及 React 渲染 key。可切换 skill（user/project）用其磁盘 path：同名两份分别住在 skills/ 与
+// skills-skip/，路径天然不同，避免「同名同 source」共用 key 导致两行串台（一起转圈/一起翻转）。
+// builtin（path:null）回落 source-name（名字唯一），仍稳定，供只读 chip 的排序兜底。
+export function skillKey(s) {
+  return (s && s.path) ? s.path : `${s?.source}-${s?.name}`;
+}
+
+// 跨「开关」稳定的标识——只用 source+name（开关把 skill 在 skills/ ↔ skills-skip/ 间搬，path 会变，
+// 但 source/name 不变）。专用于「toggle 后保位」：开关一个 skill 后它在列表里原地不动，不会因为 path
+// 变了而被 orderMap 当成新条目甩到末尾。与 skillKey（含 path、用于重复态去重）刻意不同。
+export function skillOrderKey(s) {
+  return `${s?.source}-${s?.name}`;
+}
+
+// 弹窗「默认排序」——仅在打开面板时套用（开关期间不重排，避免抖动让用户找不到 skill）。
+// 规则：项目级(project) 排在用户级(user) 之前，其余源其后；同源按名字 localeCompare 保证确定性
+// （彻底消除每次刷新 readdir 顺序漂移导致的乱序）。返回新数组，不改入参。
+const SKILL_SOURCE_RANK = { project: 0, user: 1, plugin: 2, builtin: 3 };
+export function sortSkillsDefault(skills) {
+  if (!Array.isArray(skills)) return [];
+  return [...skills].sort((a, b) => {
+    const ra = SKILL_SOURCE_RANK[a?.source] ?? 9;
+    const rb = SKILL_SOURCE_RANK[b?.source] ?? 9;
+    if (ra !== rb) return ra - rb;
+    return String(a?.name || '').localeCompare(String(b?.name || ''));
+  });
+}
+
+// 把 /api/skills 的权威结果与历史 system-reminder 解析结果合并为「当前在用」chip 列表。
+// - fsSkills=null  → 返回 null，由调用方回退到历史解析
+// - 只保留 enabled=true 且非 builtin 的条目
+// - description 优先 fs（SKILL.md frontmatter），缺失时回退历史 system-reminder 的 desc，再缺则空串
+// - 按显示名去重（user/project 同名只保留最后一条；plugin 因为带前缀天然不冲突）
+export function mergeActiveSkills(fsSkills, historicalSkills) {
+  if (!Array.isArray(fsSkills)) return null;
+  const descMap = new Map((historicalSkills || []).map(s => [s.name, s.description]));
+  const out = new Map();
+  for (const s of fsSkills) {
+    if (!s || !s.enabled || s.source === 'builtin') continue;
+    const name = skillToDisplayName(s);
+    if (!name || BUILTIN_SKILL_NAMES.has(name)) continue;
+    out.set(name, { name, description: s.description || descMap.get(name) || '' });
+  }
+  return [...out.values()];
+}
+
+// 从 <system-reminder> 内部文本里抽出 skills 列表。
+// 识别 header 句 "skills are available for use with the Skill tool" 后，按行扫描
+// `- <name>: <desc>` 格式；name 内允许冒号（plugin:foo / skill-creator:skill-creator
+// 都按原样保留），按首个 ': '（冒号+空格）切分。description 可跨多行，遇空行 / 下一个 `- `
+// flush；遇非 dash 非续行非空文本视为列表结束。
+//
+// 纯函数，无传递依赖 —— 可直接被 node --test 导入（避免 src/utils/contentFilter.js
+// 里缺 .js 后缀的 import 引起的 Node ESM resolver 失败）。
+export function parseLoadedSkills(innerText) {
+  if (typeof innerText !== 'string') return [];
+  const headerIdx = innerText.indexOf('skills are available for use with the Skill tool');
+  if (headerIdx < 0) return [];
+  const lineStart = innerText.indexOf('\n', headerIdx);
+  if (lineStart < 0) return [];
+  const tail = innerText.slice(lineStart + 1);
+  const lines = tail.split(/\r?\n/);
+  const skills = [];
+  let current = null;
+  const flush = () => {
+    if (current && current.name) skills.push(current);
+    current = null;
+  };
+  for (const line of lines) {
+    if (/^-\s+/.test(line)) {
+      flush();
+      const rest = line.replace(/^-\s+/, '');
+      const colonSpaceIdx = rest.indexOf(': ');
+      if (colonSpaceIdx > 0) {
+        current = {
+          name: rest.slice(0, colonSpaceIdx).trim(),
+          description: rest.slice(colonSpaceIdx + 2).trim(),
+        };
+      } else {
+        const name = rest.replace(/:\s*$/, '').trim();
+        current = { name, description: '' };
+      }
+    } else if (current && line.trim()) {
+      // 续行：保留换行符。弹窗用 white-space: pre-wrap 渲染，
+      // 让多段落 description（如 test-spec-designer 的触发场景/关键词）保持可读的结构。
+      current.description = current.description
+        ? current.description + '\n' + line.trim()
+        : line.trim();
+    } else if (!line.trim()) {
+      flush();
+    } else {
+      break;
+    }
+  }
+  flush();
+  return skills;
+}

package/src/utils/slashCommandLabels.js

@@ -0,0 +1,80 @@
+import { t } from '../i18n.js';
+
+// 命令清单与 Claude Code CLI upstream 公开 slash 命令对齐;upstream 增删命令时
+// 需手动同步本表 + src/i18n.js 的 "ui.slashCommand.*" 翻译块。未在表中的命令
+// (含用户自定义 ~/.claude/commands/*.md)→ 返回 null → 调用方回落到原文渲染。
+// 命令大小写敏感(与 CLI 保持一致),exact-match 不做大小写规约。
+// 翻译歧义点见 src/i18n.js "ui.slashCommand.*" 块顶部注释(单一信息源)。
+const COMMAND_KEYS = Object.freeze({
+  '/clear': 'ui.slashCommand.clear',
+  '/compact': 'ui.slashCommand.compact',
+  '/theme': 'ui.slashCommand.theme',
+  '/cost': 'ui.slashCommand.cost',
+  '/usage': 'ui.slashCommand.usage',
+  '/context': 'ui.slashCommand.context',
+  '/model': 'ui.slashCommand.model',
+  '/effort': 'ui.slashCommand.effort',
+  '/login': 'ui.slashCommand.login',
+  '/logout': 'ui.slashCommand.logout',
+  '/status': 'ui.slashCommand.status',
+  '/help': 'ui.slashCommand.help',
+  '/init': 'ui.slashCommand.init',
+  '/agents': 'ui.slashCommand.agents',
+  '/config': 'ui.slashCommand.config',
+  '/memory': 'ui.slashCommand.memory',
+  '/permissions': 'ui.slashCommand.permissions',
+  '/hooks': 'ui.slashCommand.hooks',
+  '/plugins': 'ui.slashCommand.plugins',
+  '/release-notes': 'ui.slashCommand.releaseNotes',
+  '/upgrade': 'ui.slashCommand.upgrade',
+  '/bug': 'ui.slashCommand.bug',
+  '/doctor': 'ui.slashCommand.doctor',
+  '/mcp': 'ui.slashCommand.mcp',
+  '/vim': 'ui.slashCommand.vim',
+  '/export': 'ui.slashCommand.export',
+  '/pr-comments': 'ui.slashCommand.prComments',
+  '/review': 'ui.slashCommand.review',
+  '/security-review': 'ui.slashCommand.securityReview',
+  '/ide': 'ui.slashCommand.ide',
+  '/resume': 'ui.slashCommand.resume',
+  '/terminal-setup': 'ui.slashCommand.terminalSetup',
+  '/migrate-installer': 'ui.slashCommand.migrateInstaller',
+});
+
+// 裸命令名(如 "/model")+ 可选参数(如 "/model opus")。
+// 参数前只允许 ASCII 空格/制表符 — 避免 U+2028/U+2029 等异常空白被
+// 当成参数分隔符绕过多行守卫。
+const COMMAND_PATTERN = /^(\/[a-z][a-z0-9-]*)([ \t]+.*)?$/;
+// 拒任意 Unicode 换行(LF / CR / U+2028 LINE SEP / U+2029 PARAGRAPH SEP)。
+const ANY_LINEBREAK = new RegExp('[\\n\\r\\u2028\\u2029]');
+// bidi-control(U+202A LRE / U+202B RLE / U+202C PDF / U+202D LRO / U+202E RLO /
+// U+2066 LRI / U+2067 RLI / U+2068 FSI / U+2069 PDI):进入气泡文本会翻转剩余
+// 字符视觉方向,撕裂气泡/相邻消息布局。在拼接 rest 前 strip 掉。
+const BIDI_CONTROL = new RegExp('[\\u202A-\\u202E\\u2066-\\u2069]', 'g');
+
+// 内部 matcher:返回 { cmd, rest } 或 null。两个 export 共享同一套校验逻辑,
+// 不引入第二份 regex 路径。
+function matchCommand(text) {
+  if (typeof text !== 'string') return null;
+  if (ANY_LINEBREAK.test(text)) return null;
+  const trimmed = text.trim();
+  const match = COMMAND_PATTERN.exec(trimmed);
+  if (!match) return null;
+  const cmd = match[1];
+  if (!COMMAND_KEYS[cmd]) return null;
+  return { cmd, rest: (match[2] || '').replace(BIDI_CONTROL, '') };
+}
+
+export function getSlashCommandLabel(text) {
+  const m = matchCommand(text);
+  if (!m) return null;
+  const label = t(COMMAND_KEYS[m.cmd]);
+  return m.rest ? `${label}${m.rest}` : label;
+}
+
+// 返回裸命令(如 "/model"),用于 Tooltip 等次要展示位,避免参数(可能含
+// /login <token> 等敏感数据)在 hover/title 处被泄漏。
+export function getSlashCommandTooltip(text) {
+  const m = matchCommand(text);
+  return m ? m.cmd : null;
+}

package/src/utils/splitDragCalc.js

@@ -0,0 +1,73 @@
+/**
+ * Pure geometry for the ChatView terminal/sidebar drag-resize with snap lines.
+ * Extracted from ChatView's handleSplitMouseDown/handleSidebarMouseDown so the
+ * math is unit-testable; the drag lifecycle (document listeners, body cursor)
+ * lives in chat/controllers/splitDragController.js.
+ *
+ * Snap-line object shape is shared by both axes and consumed by
+ * SnapLineOverlay: { cols, terminalPx, linePosition }. For the sidebar axis
+ * cols/terminalPx/linePosition are all the same pixel width (legacy shape).
+ */
+
+// Terminal font is 13px Menlo/Monaco; a character cell is ~7.8px wide.
+export const TERMINAL_CHAR_WIDTH = 7.8;
+export const TERMINAL_SNAP_COLS = [60, 80, 100, 120];
+export const SIDEBAR_SNAP_WIDTHS = [180, 240, 300, 360];
+export const SNAP_THRESHOLD_PX = 60;
+export const RESIZER_WIDTH_PX = 5;
+
+/**
+ * Snap lines for the terminal split, positioned so the terminal lands on a
+ * standard column count. Lines outside the usable band (terminal wider than
+ * 75% or narrower than 15% of the container) are dropped.
+ */
+export function computeTerminalSnapLines(containerWidth, {
+  charWidth = TERMINAL_CHAR_WIDTH,
+  cols = TERMINAL_SNAP_COLS,
+  resizerWidth = RESIZER_WIDTH_PX,
+} = {}) {
+  if (!containerWidth || containerWidth <= 0) return [];
+  return cols.map(c => {
+    const terminalPx = c * charWidth;
+    const totalTerminalWidth = terminalPx + resizerWidth;
+    if (totalTerminalWidth > containerWidth * 0.75 || totalTerminalWidth < containerWidth * 0.15) return null;
+    // Line position = container width - terminal pixel width - resizer width.
+    return { cols: c, terminalPx, linePosition: containerWidth - terminalPx - resizerWidth };
+  }).filter(snap => snap !== null);
+}
+
+/** Sidebar snap lines; widths at or beyond 40% of the container are dropped. */
+export function computeSidebarSnapLines(containerWidth, widths = SIDEBAR_SNAP_WIDTHS) {
+  if (!containerWidth || containerWidth <= 0) return [];
+  return widths
+    .filter(w => w < containerWidth * 0.4)
+    .map(w => ({ cols: w, terminalPx: w, linePosition: w }));
+}
+
+/** Terminal width from a drag position: right-edge anchored, 200px..75% band. */
+export function clampTerminalWidth(rectRight, clientX, containerWidth) {
+  return Math.max(200, Math.min(containerWidth * 0.75, rectRight - clientX));
+}
+
+/** Sidebar width from a drag position: left-edge anchored, 160px..40% band. */
+export function clampSidebarWidth(clientX, rectLeft, containerWidth) {
+  return Math.max(160, Math.min(containerWidth * 0.4, clientX - rectLeft));
+}
+
+/**
+ * Nearest snap line to `position` (already in the same coordinate space as
+ * linePosition), or null when none is within the threshold.
+ */
+export function findActiveSnapLine(position, snapLines, threshold = SNAP_THRESHOLD_PX) {
+  if (!snapLines || snapLines.length === 0) return null;
+  let minDistance = Infinity;
+  let closestSnap = null;
+  for (const snap of snapLines) {
+    const distance = Math.abs(position - snap.linePosition);
+    if (distance < minDistance) {
+      minDistance = distance;
+      closestSnap = snap;
+    }
+  }
+  return (closestSnap && minDistance < threshold) ? closestSnap : null;
+}