kiku-agent 1.3.1 → 1.3.3

package/server/agent/tests/webChatInspection.test.js

@@ -0,0 +1,551 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { readFileSync } from 'node:fs';
+import { getWebChatHtml } from '../../webChatHtml.js';
+import { executeDirectCatalogKnowledge, makeInspectableToolPayload } from '../../webChatServer.js';
+
+test('web chat tool payloads redact secrets and bound large values', () => {
+  const payload = makeInspectableToolPayload({
+    query: 'In Blossom',
+    apiKey: 'must-not-leak',
+    nested: { token: 'must-not-leak-either' },
+    values: Array.from({ length: 5 }, (_, index) => index)
+  }, { maxArrayItems: 2 });
+
+  assert.equal(payload.query, 'In Blossom');
+  assert.equal(payload.apiKey, '···');
+  assert.equal(payload.nested.token, '···');
+  assert.deepEqual(payload.values, [0, 1, '… ย่ออีก 3 รายการ']);
+});
+
+test('direct catalog fallback retains inspectable tool input and result', async () => {
+  const response = await executeDirectCatalogKnowledge('ผลงานซีรีส์ In Blossom');
+  const tool = response.tools.find(item => item.name === 'search_works');
+
+  assert.ok(tool);
+  assert.equal(typeof tool.input, 'object');
+  assert.equal(typeof tool.result, 'object');
+  assert.ok(Number.isFinite(tool.durationMs));
+});
+
+test('agent bare URLs render as clickable _blank links without double-wrapping', () => {
+  const src = readFileSync(new URL('../../web-chat/ui/scripts/client.js', import.meta.url), 'utf8');
+  const start = src.indexOf('function linkifyBareUrls(segment)');
+  assert.ok(start >= 0);
+  let depth = 0;
+  let end = -1;
+  for (let i = src.indexOf('{', start); i < src.length; i++) {
+    if (src[i] === '{') depth++;
+    else if (src[i] === '}') {
+      depth--;
+      if (depth === 0) {
+        end = i + 1;
+        break;
+      }
+    }
+  }
+  assert.ok(end > start);
+  const escapeHtml = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+  const linkifyBareUrls = new Function('escapeHtml', src.slice(start, end) + '; return linkifyBareUrls;')(escapeHtml);
+
+  const linked = linkifyBareUrls('ชมได้ที่ https://www.youtube.com/watch?v=OMLpNyp8T7Q จบ.');
+  assert.match(linked, /<a href="https:\/\/www\.youtube\.com\/watch\?v=OMLpNyp8T7Q" target="_blank" rel="noopener noreferrer" class="md-link">/);
+
+  const intact = linkifyBareUrls('<a href="https://a.test">https://a.test</a>');
+  assert.equal((intact.match(/<a /g) || []).length, 1);
+
+  assert.equal(linkifyBareUrls('no link here'), 'no link here');
+});
+
+test('web chat loads KaTeX assets for math typesetting', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /katex@0\.16\.11\/dist\/katex\.min\.css/);
+  assert.match(html, /katex@0\.16\.11\/dist\/katex\.min\.js/);
+  assert.match(html, /contrib\/auto-render\.min\.js/);
+  assert.match(html, /function typesetMathInBubble\(/);
+  assert.match(html, /renderMathInElement/);
+  assert.match(html, /KIKU_CLIENT_BUILD/);
+});
+
+test('math segments are shielded from markdown and restored as KaTeX targets', () => {
+  const src = readFileSync(new URL('../../web-chat/ui/scripts/client.js', import.meta.url), 'utf8');
+  const loadFn = (name) => {
+    const start = src.indexOf('function ' + name + '(');
+    assert.ok(start >= 0, name + ' must exist');
+    let depth = 0;
+    let end = -1;
+    for (let i = src.indexOf('{', start); i < src.length; i++) {
+      if (src[i] === '{') depth++;
+      else if (src[i] === '}') {
+        depth--;
+        if (depth === 0) {
+          end = i + 1;
+          break;
+        }
+      }
+    }
+    assert.ok(end > start);
+    return new Function(src.slice(start, end) + '; return ' + name + ';')();
+  };
+  const extractMathSegments = loadFn('extractMathSegments');
+  const restoreMathSegments = loadFn('restoreMathSegments');
+
+  const store = [];
+  const shielded = extractMathSegments('โจทย์ $\\lim_{x \\to 0} a * b$ และ $$x^2$$ จบ ส่วน `$y$` ในโค้ดไม่แตะ', store);
+  assert.equal(store.length, 2);
+  assert.ok(shielded.includes('§§§MATH0§§§'));
+  assert.ok(shielded.includes('§§§MATH1§§§'));
+  assert.ok(shielded.includes('`$y$`'), 'math inside inline code must stay untouched');
+  assert.ok(!shielded.includes('\\lim'), 'raw math must not leak into markdown processing');
+
+  const restored = restoreMathSegments(shielded, store);
+  assert.match(restored, /<span class="math-inline">\$\\lim/);
+  assert.match(restored, /<div class="math-display">\$\$x\^2\$\$<\/div>/);
+
+  assert.equal(extractMathSegments('ราคา $100 บาท', []), 'ราคา $100 บาท');
+  assert.equal(extractMathSegments('no math here', []).includes('§§§MATH'), false);
+});
+
+test('latexToUnicode fallback covers calculus symbols without KaTeX', () => {
+  const src = readFileSync(new URL('../../web-chat/ui/scripts/client.js', import.meta.url), 'utf8');
+  const loadBlock = (prefix) => {
+    const start = src.indexOf(prefix);
+    assert.ok(start >= 0, prefix + ' must exist');
+    let depth = 0;
+    let end = -1;
+    for (let i = src.indexOf('{', start); i < src.length; i++) {
+      if (src[i] === '{') depth++;
+      else if (src[i] === '}') {
+        depth--;
+        if (depth === 0) {
+          end = i + 1;
+          break;
+        }
+      }
+    }
+    assert.ok(end > start);
+    return src.slice(start, end);
+  };
+  const sandbox = loadBlock('const LATEX_SYMBOL_MAP =') + '\n' +
+    loadBlock('const LATEX_SUP_MAP =') + '\n' +
+    loadBlock('const LATEX_SUB_MAP =') + '\n' +
+    src.slice(src.indexOf('function latexReadBrace('), src.indexOf('function latexMapChars(')) + '\n' +
+    src.slice(src.indexOf('function latexMapChars('), src.indexOf('function latexToUnicode(')) + '\n' +
+    src.slice(src.indexOf('function latexToUnicode('), src.indexOf('window.latexToUnicode')) +
+    '\nreturn latexToUnicode;';
+  const latexToUnicode = new Function(sandbox)();
+  assert.equal(latexToUnicode('\\frac{1}{2}'), '(1)/(2)');
+  assert.equal(latexToUnicode('L = \\frac{1}{\\sqrt{e}}'), 'L = (1)/(√(e))');
+  assert.equal(latexToUnicode('1^\\infty'), '1^∞');
+  assert.equal(latexToUnicode('\\lim_{x \\to 0} \\cos x'), 'lim_(x → 0) cos x');
+  assert.equal(latexToUnicode('x_0 + x_{10}'), 'x₀ + x₁₀');
+  assert.match(readFileSync(new URL('../../web-chat/ui/scripts/client.js', import.meta.url), 'utf8'), /fallbackTypesetMath\(bubble\)/);
+});
+
+test('latexToUnicode fallback covers advanced math: matrices, accents, aliases', () => {
+  const src = readFileSync(new URL('../../web-chat/ui/scripts/client.js', import.meta.url), 'utf8');
+  const sandbox = src.slice(src.indexOf('const LATEX_SYMBOL_MAP ='), src.indexOf('window.latexToUnicode')) +
+    '\nreturn latexToUnicode;';
+  const latexToUnicode = new Function(sandbox)();
+  assert.equal(latexToUnicode('\\begin{matrix}a&b\\\\c&d\\end{matrix}'), 'a b c d');
+  assert.equal(latexToUnicode('\\binom{n}{k}'), '(n choose k)');
+  assert.equal(latexToUnicode('\\hat{\\theta}+\\vec{v}+\\bar{z}+\\dot{x}'), 'θ+v+z+x');
+  assert.equal(latexToUnicode('x\\le 0, y\\ge 1, a\\ne b'), 'x≤ 0, y≥ 1, a≠ b');
+  assert.equal(latexToUnicode('\\tag{1} x=1'), '(1) x=1');
+  assert.equal(latexToUnicode('\\sqrt{\\frac{1}{2}}'), '√((1)/(2))');
+  assert.equal(latexToUnicode('\\dfrac{a}{b}'), '(a)/(b)');
+  assert.equal(latexToUnicode('\\boxed{42} + \\cancel{x}'), '[42] + x');
+  assert.equal(latexToUnicode('\\text{อนันต์} + \\mathrm{d}x'), 'อนันต์ + dx');
+  assert.equal(latexToUnicode('x \\in \\mathbb{R}^n'), 'x ∈ ℝⁿ');
+  const noRaw = (s) => !/[\\][a-zA-Z]+/.test(s) && !/[{}]/.test(s);
+  for (const tex of [
+    '\\sum_{n=1}^{\\infty} n + \\prod_{i=1}^n i + \\int_0^1 x\\,dx',
+    '\\forall x \\exists y: x \\subset y \\cup z \\approx w',
+    '\\alpha\\beta\\gamma\\Delta\\Omega + \\clubsuit\\sharp\\flat',
+    '\\left( \\frac{a}{b} \\right) + \\big| x \\big| + A \\overset{!}{=} B',
+  ]) {
+    assert.ok(noRaw(latexToUnicode(tex)), 'raw latex left in: ' + latexToUnicode(tex));
+  }
+});
+
+test('math extractor shields bare display environments and auto-render knows them', () => {
+  const src = readFileSync(new URL('../../web-chat/ui/scripts/client.js', import.meta.url), 'utf8');
+  const loadFn = (name) => {
+    const start = src.indexOf('function ' + name + '(');
+    assert.ok(start >= 0, name + ' must exist');
+    const endMarker = name === 'extractMathSegments' ? 'function restoreMathSegments(' : 'const LATEX_SYMBOL_MAP =';
+    return new Function(src.slice(start, src.indexOf(endMarker)) + '; return ' + name + ';')();
+  };
+  const extractMathSegments = loadFn('extractMathSegments');
+  const restoreMathSegments = loadFn('restoreMathSegments');
+  const store = [];
+  const shielded = extractMathSegments('ผลคือ\n\\begin{align}x &= 1 \\\\ y &= 2\\end{align}\nจบ', store);
+  assert.equal(store.length, 1);
+  assert.equal(store[0].display, true);
+  assert.ok(shielded.includes('§§§MATH0§§§'));
+  const restored = restoreMathSegments(shielded, store);
+  assert.match(restored, /<div class="math-display">\\begin\{align\}/);
+  const html = getWebChatHtml();
+  for (const env of ['equation', 'align', 'gather', 'multline']) {
+    assert.ok(html.includes('\\\\begin{' + env + '}'), 'auto-render must know ' + env);
+  }
+});
+
+test('web chat HTML isolates answer text and renders expandable tool details', () => {
+  const html = getWebChatHtml();
+
+  assert.match(html, /class="answer-content"/);
+  assert.match(html, /class="tool-inspector"/);
+ 
+  assert.match(html, /renderToolParamChips\(t\)/);
+  assert.match(html, /summarizeToolResult\(t\)/);
+  assert.match(html, /tool-call-line/);
+  assert.match(html, /tool-result-strip tool-tone-/);
+  assert.match(html, /tool-param-chip/);
+  assert.match(html, /function renderJsonTree\(/);
+  assert.match(html, /function copyToolJson\(/);
+  assert.match(html, /ข้อมูลดิบ \(JSON\)/);
+  assert.match(html, /\.tool-raw-json\s*\{[^}]*max-width:\s*100%/);
+  assert.match(html, /\.tool-raw-json\s*\{[^}]*box-sizing:\s*border-box/);
+  assert.match(html, /\.tool-raw-json\s*\{[^}]*overflow:\s*hidden/);
+  assert.match(html, /\.tool-json-tree\s*\{[^}]*word-break:\s*break-word/);
+  assert.match(html, /\.tool-view-switch-row\s*\{[^}]*flex-wrap:\s*wrap/);
+ 
+  assert.doesNotMatch(html, /tool-raw-json[^\n]*106\.38/);
+  assert.doesNotMatch(html, /\.tool-inspector:has\(\.tool-raw-json\[open\]\)\s*\{\s*overflow:\s*visible/);
+
+  assert.doesNotMatch(html, /class="tool-payload"/);
+  assert.doesNotMatch(html, /toggleInspectorJsonView/);
+  assert.match(html, /extractQuoteFromAnswer\(answerRoot\)/);
+  assert.match(html, /restoreInspectorState\(bubble/);
+  assert.match(html, /--tool-accent:\s*#0369a1/);
+  assert.match(html, /sessionId:\s*currentSessionId/);
+  assert.match(html, /chatHistory\.slice\(0, -1\)\.slice\(-24\)/);
+  assert.doesNotMatch(html, /Deep Reasoning Trace/);
+});
+
+test('generated web chat inline scripts remain syntactically valid', () => {
+  const html = getWebChatHtml();
+  const scripts = Array.from(html.matchAll(/<script(?:\s[^>]*)?>([\s\S]*?)<\/script>/gi), match => match[1]);
+
+  assert.ok(scripts.length > 0);
+  scripts.forEach((script) => {
+    assert.doesNotThrow(() => new Function(script));
+  });
+});
+
+test('drama cards use matching OST video ids and hide unavailable tracks', () => {
+  const html = getWebChatHtml();
+
+  assert.match(html, /youtubeId: 'oEgxqij58LQ',[\s\S]*?ostTitle: '叹云兮 \(Tan Yun Xi\) OST'/);
+  assert.match(html, /youtubeId: '-vf6jU96WI4',[\s\S]*?ostTitle: '千年等一回 \(A Millennium Wait\)'/);
+  assert.match(html, /youtubeId: '9ke3efb9U7A',[\s\S]*?ostTitle: '芙蓉 \(Fu Rong\) OST'/);
+  assert.match(html, /youtubeId: 'lzDP2MfP3eA',[\s\S]*?ostTitle: '如纱 \(Ru Sha\) OST'/);
+  assert.match(html, /drama\.youtubeId && drama\.ostTitle/);
+  assert.doesNotMatch(html, /youtubeId: 'qjA7K9pM_U8'/);
+});
+
+test('web chat html registers sw.js and sw.js is accessible', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /navigator\.serviceWorker\.register\('\/sw\.js'\)/);
+});
+
+test('floating mini player contains disc dock, progress bar, video toggle, and jukebox controls', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /id="mini-player-dock"/);
+  assert.match(html, /id="mini-player-card"/);
+  assert.match(html, /id="btn-mini-disc"/);
+  assert.match(html, /id="mini-disc-progress-circle"/);
+  assert.match(html, /id="mini-player-progressbar"/);
+  assert.match(html, /onclick="toggleMiniPlayerShuffle\(\)"/);
+  assert.match(html, /onclick="toggleMiniPlayerRepeat\(\)"/);
+  assert.match(html, /onclick="toggleMiniPlayerVideo\(\)"/);
+  assert.match(html, /id="mini-player-video-frame-container"/);
+  assert.match(html, /onclick="nextMiniPlayerTrack\(\)"/);
+  assert.match(html, /onclick="prevMiniPlayerTrack\(\)"/);
+  assert.match(html, /JU_JINGYI_PLAYLIST/);
+});
+
+test('renderFollowUpSuggestions creates intelligent contextual follow-up topic chips', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /function renderFollowUpSuggestions\(botGroup, answerText, userQuery, serverSuggestions\)/);
+  assert.match(html, /follow-up-suggestions/);
+  assert.match(html, /typesetMathInBubble\(chip\)/, 'renderFollowUpSuggestions must typeset math in chips');
+  assert.match(html, /detectSpecializedOpenDomainFollowUps/, 'client must have specialized open-domain follow-up detector');
+  assert.match(html, /💎 บทบาท Versace/);
+  assert.match(html, /👗 แบรนด์อื่นๆ ทั้งหมด/);
+  assert.match(html, /🌸 ตัวตนกับรูปลักษณ์/);
+  assert.match(html, /🌿 เสน่ห์หานหยุนซี/);
+});
+
+test('song queries render embedded iframes and tool visual mini iframes', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /function extractSongEmbedsFromContext/);
+  assert.match(html, /function renderSongEmbedCard/);
+  assert.match(html, /chat-rich-songs-container/);
+  assert.match(html, /chat-song-iframe/);
+  assert.match(html, /https:\/\/www\.youtube-nocookie\.com\/embed\//);
+  assert.match(html, /tool-card-iframe-wrap/);
+  assert.match(html, /tool-card-mini-iframe/);
+});
+
+test('agent interactive question cards detect questions and render action pills', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /function detectAgentInteractiveQuestion/);
+  assert.match(html, /function renderAgentQuestionCard/);
+  assert.match(html, /agent-interactive-question-card/);
+  assert.match(html, /agent-q-btn btn-primary-pill/);
+  assert.match(html, /submitCustomAgentContinuation/);
+});
+
+test('luxury Voice HUD renders live orb, visualizer canvas, and direct action controls', () => {  const html = getWebChatHtml();
+  assert.match(html, /id="voice-hud"/);
+  assert.match(html, /class="voice-live-orb"/);
+  assert.match(html, /id="voice-canvas"/);
+  assert.match(html, /id="voice-hud-text"/);
+  assert.match(html, /id="voice-lang-badge"/);
+  assert.match(html, /onclick="sendVoiceQueryDirectly\(\)"/);
+  assert.match(html, /onclick="cancelSpeechRecognition\(\)"/);
+  assert.match(html, /function startVoiceAudioVisualizer/);
+  assert.match(html, /function stopVoiceAudioVisualizer/);
+});
+
+test('song playback timestamp syncs and mutually pauses between chat embed and mini player', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /function openMiniPlayerFromCard\(btnEl, videoIdOrUrl, title\)/);
+  assert.match(html, /function pauseAllChatSongIframes\(\)/);
+  assert.match(html, /function pauseMiniPlayer\(\)/);
+  assert.match(html, /function handleChatIframeLoad\(iframe\)/);
+  assert.match(html, /handleChatIframeLoad\(this\)/);
+  assert.match(html, /openMiniPlayerFromCard\(this/);
+  assert.match(html, /chatIframeTimes/);
+  assert.match(html, /&start=/);
+  assert.match(html, /sendMiniPlayerCommand\('seekTo'/);
+});
+
+test('message bubble actions work without disruptive toasts and modal elements exist', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /id="quote-card-modal"/);
+  assert.match(html, /id="quote-canvas"/);
+  assert.match(html, /id="quote-text-editor"/);
+  assert.match(html, /id="share-card-modal"/);
+  assert.match(html, /function copyBubbleText\(btn\)/);
+  assert.match(html, /function fallbackCopy\(text\)/);
+  assert.match(html, /function regenerateMessage\(target\)/);
+  assert.match(html, /function makeQuoteCardFromBubble\(btn\)/);
+  assert.match(html, /function toggleBookmark\(btn\)/);
+  assert.match(html, /function forkConversation\(target\)/);
+  assert.match(html, /function openShareCardFromAction\(btn\)/);
+  assert.match(html, /btn\.closest\('\.msg-group'\)/);
+  assert.doesNotMatch(html, /function speakMessage/);
+  assert.doesNotMatch(html, /aria-label="อ่านออกเสียง"/);
+  assert.doesNotMatch(html, /showToast\('คัดลอกข้อความแล้ว'\)/);
+  assert.doesNotMatch(html, /showToast\('บันทึก Bookmark เรียบร้อย ⭐'\)/);
+  assert.doesNotMatch(html, /id="toast-container"/);
+  assert.doesNotMatch(html, /对话已导出/);
+  assert.doesNotMatch(html, /\.toast-container/);
+  assert.doesNotMatch(html, /\.toast-pill/);
+});
+
+test('follow-up suggestions persist and re-render upon page refresh and loadActiveSession', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /function loadActiveSession\(\)/);
+  assert.match(html, /renderFollowUpSuggestions\(lastBotGroup, lastBotMessage\.text, userQ, serverSugg\)/);
+  assert.match(html, /serverSuggestions:\s*serverSuggestions\s*\|\|\s*\[\]/);
+  assert.match(html, /userQuery:\s*query/);
+});
+
+test('web-chat displays Sponsor Spotlight ads with sidebar card, modal, and /ads in-chat card', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /id="sidebar-ad-card"/);
+  assert.match(html, /id="sponsors-modal"/);
+  assert.match(html, /id="sponsors-modal-body"/);
+  assert.match(html, /function renderSidebarAd\(\)/);
+  assert.match(html, /function cycleSidebarAd\(/);
+  assert.match(html, /function openSponsorsModal\(/);
+  assert.match(html, /function showInChatSponsorCard\(/);
+  assert.match(html, /modal\.classList\.add\('open'\)/);
+  assert.match(html, /body\.sidebar-collapsed\s+\.sidebar-sponsors\s*\{[^}]*display:\s*none\s*!important/);
+  assert.match(html, /class="sidebar-ad-cta"/);
+  assert.match(html, /class="sidebar-ad-direct-link"/);
+  assert.match(html, /width:\s*300px\s*!important/);
+  assert.match(html, /width:\s*310px;\s*max-width:\s*86vw/);
+  assert.match(html, /\.sponsors-modal-dialog/);
+  assert.match(html, /\.sponsor-url-code/);
+  assert.match(html, /DashSecurity/);
+  assert.match(html, /ThemeHackers/);
+  assert.match(html, /https:\/\/dashsecurity\.kpltgroup\.com\//);
+  assert.match(html, /https:\/\/jujingyi-kikuuu\.vercel\.app\//);
+  assert.match(html, /https:\/\/github\.com\/Themehackers\//);
+  assert.match(html, /lowerQuery === '\/ads'/);
+  assert.match(html, /cmd_ads/);
+});
+
+test('btn-quick-actions renders complete plus sign (+) icon with horizontal and vertical lines', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /id="btn-quick-actions"/);
+  assert.match(html, /<line x1="12" y1="5" x2="12" y2="19"\/><line x1="5" y1="12" x2="19" y2="12"\/>/);
+});
+
+test('user bubble renders dedicated renderUserContent with high contrast white text and Kiku rose theme', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /function renderUserContent\(/);
+  assert.match(html, /user-content-body/);
+  assert.match(html, /--user-msg:\s*linear-gradient\(135deg,\s*#e11d48/);
+  assert.match(html, /\.bubble-user\s*,\s*\.bubble-user\s*\*\s*,\s*\.bubble-user\s*p/);
+  assert.match(html, /color:\s*#ffffff\s*!important/);
+});
+
+test('user bubble renders math formulas with typesetMathInBubble and dedicated KaTeX styles', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /renderUserContent\(bubble,\s*text,\s*details\s*=\s*\{\}\)\s*\{[\s\S]*?typesetMathInBubble\(bubble\)/);
+  assert.match(html, /\.user-content-body\s*\.katex\s*,\s*\.bubble-user\s*\.katex/);
+  assert.match(html, /\.bubble-user\s*\.math-inline/);
+  assert.match(html, /\.bubble-user\s*\.math-display/);
+});
+
+test('clarifying questions and interactive question cards are stably pinned without stream flickering', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /\.clarify-slot/);
+  assert.match(html, /clarifySlot\.className = 'clarify-slot'/);
+  assert.match(html, /msgGroup\.insertBefore\(clarifySlot,\s*botBubble(?:\.nextSibling)?\)/);
+  assert.match(html, /dismissAgentInteractiveQuestion/);
+  assert.match(html, /dismissedAgentQuestions/);
+  assert.match(html, /!details\.isStreaming/);
+});
+
+test('subagent progress renders a dedicated live card with evidence report', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /function accumulateSubagentProgress\(/);
+  assert.match(html, /function finalizeSubagentFromToolResult\(/);
+  assert.match(html, /function renderSubagentCards\(/);
+  assert.match(html, /event\.type === 'subagent_progress'/);
+  assert.match(html, /subagentsAccum/);
+  assert.match(html, /subagents: subagentsAccum/);
+  assert.match(html, /class="subagents-container"/);
+  assert.match(html, /subagent-card/);
+  assert.match(html, /subagent-report/);
+  assert.match(html, /\.subagent-card\s*\{/);
+  assert.match(html, /subagent-pulse/);
+  assert.match(html, /run_deep_research: '▸/);
+});
+
+test('error handling renders dedicated retry error card and interactive retry badge', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /function renderErrorCardWithRetry\(/);
+  assert.match(html, /class="chat-error-card"/);
+  assert.match(html, /class="btn-retry-chat"/);
+  assert.match(html, /onclick="regenerateMessage\(this\)"/);
+  assert.match(html, /data-retry-query=/);
+  assert.match(html, /badge\.dataset\.status = status;/);
+  assert.match(html, /if \(status === STATUS\.ERROR\)/);
+  assert.match(html, /globalScope\.regenerateMessage\(group\)/);
+  assert.match(html, /\.agent-status-badge\[data-status='error'\]\s*\{/);
+  assert.match(html, /\.btn-retry-chat\s*\{/);
+  assert.match(html, /btn-retry-chat:hover/);
+  assert.match(html, /bubble button:not\(\.btn-retry-chat\)/);
+});
+
+test('incomplete answer renders styled resume bar with continue button and CSS styles', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /resumeWrap\.className = 'resume-incomplete-bar'/);
+  assert.match(html, /class="resume-incomplete-info"/);
+  assert.match(html, /class="resume-incomplete-badge"/);
+  assert.match(html, /class="resume-incomplete-title"/);
+  assert.match(html, /class="btn-resume-continue btn-mini-ctrl"/);
+  assert.match(html, /resumeIncompleteAnswer\(group, m\)/);
+  assert.match(html, /\.resume-incomplete-bar\s*\{/);
+  assert.match(html, /\.btn-resume-continue/);
+  assert.match(html, /\.btn-mini-ctrl/);
+  assert.match(html, /resumeBarArrive/);
+});
+test('input box enhancements: slash commands menu, model chip, relocated attachment tray, and quick action icons', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /id="slash-commands-menu"/);
+  assert.match(html, /class="slash-commands-menu"/);
+  assert.match(html, /id="input-model-chip"/);
+  assert.match(html, /id="input-model-chip-label"/);
+  assert.match(html, /id="input-box-container"[\s\S]*?id="attachment-tray"/);
+  assert.match(html, /btn-send-muted/);
+  assert.match(html, /SLASH_COMMANDS/);
+  assert.match(html, /syncInputModelChip/);
+  assert.match(html, /updateSendButtonState/);
+  assert.match(html, /drag-over/);
+});
+
+test('file upload system: attachments are validated, sent to /api/chat, and rendered with lightbox preview', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /function safeRasterDataUrl\(/);
+  assert.match(html, /function addAttachmentFile\(/);
+  assert.match(html, /function renderAttachmentTray\(/);
+  assert.match(html, /function handleImageUpload\(/);
+  assert.match(html, /chat-attached-images-wrap/);
+  assert.match(html, /chat-attached-image/);
+  assert.match(html, /openImageLightbox/);
+  assert.match(html, /attachments:\s*attachmentsToSend/);
+  assert.match(html, /svg\+xml/);
+  assert.match(html, /avif/);
+});
+
+test('welcome hero gallery image picker and drag-and-drop system exist and are wired', () => {
+  const html = getWebChatHtml();
+  assert.match(html, /id="gallery-picker-modal"/);
+  assert.match(html, /id="gallery-picker-grid"/);
+  assert.match(html, /id="gallery-picker-search"/);
+  assert.match(html, /data-hero-slot="primary"/);
+  assert.match(html, /data-hero-slot="secondary"/);
+  assert.match(html, /data-hero-slot="poster"/);
+  assert.match(html, /function openHeroGalleryPicker\(/);
+  assert.match(html, /function closeHeroGalleryPicker\(/);
+  assert.match(html, /function filterGalleryPickerCategory\(/);
+  assert.match(html, /function handleGallerySearchInput\(/);
+  assert.match(html, /function applyHeroImage\(/);
+  assert.match(html, /function resetHeroImages\(/);
+  assert.match(html, /function scoreGalleryItem\(/);
+  assert.match(html, /function initWelcomeHeroGallery\(/);
+  assert.match(html, /kiku_hero_images/);
+  assert.match(html, /application\/x-kiku-hero-img/);
+  assert.match(html, /\.gallery-picker-dialog/);
+  assert.match(html, /\.gallery-picker-grid/);
+  assert.match(html, /\.hero-media-frame \.hero-slot-action/);
+});
+
+test('all gallery images exist on disk and staticRoute serves them without 404', async () => {
+  const { handleApiRequest } = await import('../../apiRouter.js');
+  const { handleStaticRoute } = await import('../../web-chat/routes/staticRoute.js');
+  const stream = await import('node:stream');
+
+  let body = '';
+  const req = {
+    method: 'GET',
+    url: '/api/v1/gallery?scope=all&limit=200',
+    headers: { host: 'localhost:3000' }
+  };
+  const res = {
+    writeHead: () => {},
+    end: (chunk) => { if (chunk) body += chunk; },
+    setHeader: () => {}
+  };
+  await handleApiRequest(req, res);
+  const json = JSON.parse(body);
+  assert.ok(Array.isArray(json.data) && json.data.length >= 70);
+
+  for (const item of json.data) {
+    const encodedUrl = encodeURI(item.image);
+    const mockReq = { url: encodedUrl };
+    let handledCode = 0;
+    const mockRes = new stream.Writable({
+      write(chunk, encoding, callback) { callback(); }
+    });
+    mockRes.writeHead = (code) => { handledCode = code; };
+    const u = new URL(mockReq.url, 'http://localhost:3002');
+    const handled = handleStaticRoute(mockReq, mockRes, u.pathname, 3002);
+    assert.strictEqual(handled, true, `Route must handle image ${item.image}`);
+    assert.strictEqual(handledCode, 200, `Image must return 200 OK for ${item.image}`);
+  }
+
+  const html = getWebChatHtml();
+  assert.match(html, /onerror="this\.onerror=null;const it=this\.closest/);
+});
+
+

package/server/agent/tests/webChatMcp.test.js

@@ -0,0 +1,94 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import http from 'node:http';
+import { handleWebChatRequest } from '../../web-chat/router.js';
+
+test('Web Chat MCP: GET /mcp returns protocol discovery JSON', async () => {
+  const server = http.createServer(async (req, res) => {
+    await handleWebChatRequest(req, res, { port: 3002 });
+  });
+
+  await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
+  const port = server.address().port;
+
+  try {
+    const res = await fetch(`http://127.0.0.1:${port}/mcp`);
+    assert.equal(res.status, 200);
+    const data = await res.json();
+    assert.equal(data.protocol, 'mcp');
+    assert.equal(data.name, 'kiku');
+    assert.ok(data.capabilities?.toolsCount > 0);
+  } finally {
+    server.close();
+  }
+});
+
+test('Web Chat MCP: GET /api/mcp/status returns tools ecosystem and configs', async () => {
+  const server = http.createServer(async (req, res) => {
+    await handleWebChatRequest(req, res, { port: 3002 });
+  });
+
+  await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
+  const port = server.address().port;
+
+  try {
+    const res = await fetch(`http://127.0.0.1:${port}/api/mcp/status`);
+    assert.equal(res.status, 200);
+    const data = await res.json();
+    assert.equal(data.status, 'ok');
+    assert.equal(data.mcpServer?.protocolVersion, '2025-11-25');
+    assert.ok(data.mcpServer?.supportedProtocolVersions?.includes('2024-11-05'));
+    assert.ok(data.mcpServer?.toolsCount >= 60);
+    assert.ok(data.totalTools >= 68);
+    assert.ok(data.categories?.ALL >= 68);
+    assert.ok(data.categories?.CATALOG > 0);
+    assert.ok(data.categories?.RESEARCH > 0);
+    assert.ok(Array.isArray(data.tools));
+    assert.ok(data.tools.length >= 68);
+    assert.ok(data.mcpServer?.clientConfigs?.claudeDesktop);
+    assert.ok(data.mcpServer?.clientConfigs?.cursor);
+    assert.ok(data.mcpServer?.clientConfigs?.windsurf);
+    assert.ok(data.mcpServer?.clientConfigs?.vscode);
+    assert.ok(data.mcpServer?.clientConfigs?.antigravity);
+    assert.ok(data.mcpServer?.clientConfigs?.cline);
+    assert.ok(data.mcpServer?.clientConfigs?.claudeCode);
+    assert.ok(data.mcpServer?.clientConfigs?.geminiCli);
+    assert.ok(data.mcpServer?.clientConfigs?.librechat);
+    assert.ok(data.mcpServer?.clientConfigs?.opencode);
+
+    
+    assert.ok(data.mcpServer.clientConfigs.antigravity.http?.mcpServers?.kiku?.url);
+    assert.ok(data.mcpServer.clientConfigs.antigravity.stdio?.mcpServers?.kiku?.command);
+    assert.ok(data.mcpServer.clientConfigs.vscode.http?.servers?.kiku?.url);
+    assert.ok(data.mcpServer.clientConfigs.librechat.httpYaml?.includes('streamable-http'));
+    assert.ok(data.mcpServer.clientConfigs.opencode.http?.$schema);
+
+    const profileTool = data.tools.find(t => t.name === 'get_profile_and_fandom');
+    assert.ok(profileTool);
+    assert.equal(profileTool.category, 'CATALOG');
+    assert.equal(profileTool.isMcpExposed, true);
+  } finally {
+    server.close();
+  }
+});
+
+test('Web Chat MCP: GET /api/status includes mcp server capability', async () => {
+  const server = http.createServer(async (req, res) => {
+    await handleWebChatRequest(req, res, { port: 3002 });
+  });
+
+  await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
+  const port = server.address().port;
+
+  try {
+    const res = await fetch(`http://127.0.0.1:${port}/api/status?light=1`);
+    assert.equal(res.status, 200);
+    const data = await res.json();
+    assert.equal(data.status, 'ok');
+    assert.ok(data.mcp);
+    assert.equal(data.mcp.endpoint, '/mcp');
+    assert.equal(data.mcp.online, true);
+  } finally {
+    server.close();
+  }
+});