refactor(detail): split SkillDetail.jsx into focused modules

client/scripts/highlight.test.mjs

@@ -0,0 +1,38 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { cachedRender, highlightCode, languageForPath, splitHighlightedLines } from '../src/utils/highlight.js';
+
+test('languageForPath maps common skill-bundle extensions and ignores unknown ones', () => {
+  assert.equal(languageForPath('scripts/run.sh'), 'bash');
+  assert.equal(languageForPath('a/b/c.TSX'), 'typescript');
+  assert.equal(languageForPath('config.toml'), 'ini');
+  assert.equal(languageForPath('LICENSE'), null);
+  assert.equal(languageForPath('image.png'), null);
+});
+
+test('highlightCode escapes unknown languages instead of auto-detecting', () => {
+  assert.equal(highlightCode('<a> & b', null), '&lt;a&gt; &amp; b');
+  assert.equal(highlightCode('', 'bash'), '');
+  assert.match(highlightCode('const x = 1;', 'javascript'), /<span class="hljs-keyword">const<\/span>/);
+});
+
+test('splitHighlightedLines closes and reopens spans that cross line breaks', () => {
+  const lines = splitHighlightedLines('<span class="s">"a\nb"</span>\n\nend');
+  assert.deepEqual(lines, [
+    '<span class="s">"a</span>',
+    '<span class="s">b"</span>',
+    '&nbsp;',
+    'end',
+  ]);
+});
+
+test('cachedRender reuses results for identical source and kind', () => {
+  let calls = 0;
+  const render = (text) => { calls += 1; return text.toUpperCase(); };
+  const source = `cache-test-${Date.now()}`;
+  assert.equal(cachedRender('t', source, render), source.toUpperCase());
+  assert.equal(cachedRender('t', source, render), source.toUpperCase());
+  assert.equal(calls, 1);
+  cachedRender('other', source, render);
+  assert.equal(calls, 2);
+});

client/scripts/markdown-doc.test.mjs

@@ -0,0 +1,41 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { extractHeadings, parseFrontmatterPairs, slugifyHeading, splitFrontmatter } from '../src/utils/markdownDoc.js';
+
+test('splitFrontmatter separates the leading --- block from the body', () => {
+  assert.deepEqual(splitFrontmatter('---\nname: a\n---\n# Title'), { frontmatter: 'name: a', body: '# Title' });
+  assert.deepEqual(splitFrontmatter('# No frontmatter'), { frontmatter: '', body: '# No frontmatter' });
+  assert.deepEqual(splitFrontmatter('---\nunterminated'), { frontmatter: '', body: '---\nunterminated' });
+  assert.deepEqual(splitFrontmatter(''), { frontmatter: '', body: '' });
+});
+
+test('extractHeadings keeps h1-h4 and skips headings inside fenced code', () => {
+  const md = ['# One', '```bash', '# not a heading', '```', '## Two ##', '~~~', '### hidden', '~~~', '##### five', '#### Four'].join('\n');
+  assert.deepEqual(extractHeadings(md), [
+    { level: 1, text: 'One' },
+    { level: 2, text: 'Two' },
+    { level: 4, text: 'Four' },
+  ]);
+});
+
+test('extractHeadings only closes a fence with the same marker', () => {
+  const md = ['```', '~~~', '# inside', '```', '# after'].join('\n');
+  assert.deepEqual(extractHeadings(md), [{ level: 1, text: 'after' }]);
+});
+
+test('slugifyHeading keeps unicode letters and de-duplicates within one document', () => {
+  const used = new Set();
+  assert.equal(slugifyHeading('Hello, World!', used), 'hello-world');
+  assert.equal(slugifyHeading('Hello World', used), 'hello-world-2');
+  assert.equal(slugifyHeading('使用 说明', used), '使用-说明');
+  assert.equal(slugifyHeading('!!!', used), 'section');
+});
+
+test('parseFrontmatterPairs reads key: value lines and strips surrounding quotes', () => {
+  assert.deepEqual(parseFrontmatterPairs('name: "demo"\ndescription: \'x y\'\n  - list item\nversion: 1'), [
+    { key: 'name', value: 'demo' },
+    { key: 'description', value: 'x y' },
+    { key: 'version', value: '1' },
+  ]);
+  assert.deepEqual(parseFrontmatterPairs(''), []);
+});

client/scripts/ui-regression.test.mjs

@@ -21,8 +21,9 @@ test('App wires every interactive component callback to an implementation', asyn
 
 test('detail breadcrumb navigates to the folder instead of moving the skill into it', async () => {
   const detail = await source('src/components/SkillDetail.jsx');
-  assert.ok(!detail.includes('onMoveFolder'), 'breadcrumb must not trigger a move mutation');
-  assert.match(detail, /crumb-link[\s\S]{0,80}?onSelectFolder\?\.\(arr\.slice\(0, i \+ 1\)\.join\('\/'\)\)/, 'each crumb segment navigates to its own path prefix');
+  const toolbar = await source('src/components/detail/DetailToolbar.jsx');
+  assert.ok(!detail.includes('onMoveFolder') && !toolbar.includes('onMoveFolder'), 'breadcrumb must not trigger a move mutation');
+  assert.match(toolbar, /crumb-link[\s\S]{0,80}?onSelectFolder\?\.\(arr\.slice\(0, i \+ 1\)\.join\('\/'\)\)/, 'each crumb segment navigates to its own path prefix');
 });
 
 test('detail always fetches the full record so file_tree stays available', async () => {