project-knowledge 0.1.0

package/_site/_test/ui-smoke-test.js

@@ -0,0 +1,237 @@
+// UI smoke test - runs in a real Chromium via CDP.
+//
+// It verifies the backend-driven control center renders, core navigation is
+// visible, project status data appears, tab switching works, and no console or
+// network errors are emitted during load.
+//
+// Run: node _site/_test/ui-smoke-test.js [URL]
+
+const { spawn } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const http = require('http');
+const WebSocket = require('ws');
+
+const CHROME = 'C:\\Users\\SanQian\\AppData\\Local\\ms-playwright\\chromium-1223\\chrome-win64\\chrome.exe';
+const TARGET_URL = process.argv[2] || 'http://127.0.0.1:7777/';
+const OUT_DIR = path.join(__dirname, 'ui-screenshots');
+const PROFILE = path.join(OUT_DIR, 'smoke-profile');
+const PORT = 9340;
+
+fs.mkdirSync(OUT_DIR, { recursive: true });
+fs.rmSync(PROFILE, { recursive: true, force: true });
+fs.mkdirSync(PROFILE, { recursive: true });
+
+function fetchJson(url) {
+  return new Promise((resolve, reject) => {
+    http.get(url, res => {
+      let body = '';
+      res.on('data', chunk => body += chunk);
+      res.on('end', () => {
+        try { resolve(JSON.parse(body)); }
+        catch (e) { reject(e); }
+      });
+    }).on('error', reject);
+  });
+}
+
+async function waitFor(fn, label, ms = 15000) {
+  const deadline = Date.now() + ms;
+  let last;
+  while (Date.now() < deadline) {
+    try {
+      const result = await fn();
+      if (result) return result;
+    } catch (e) {
+      last = e;
+    }
+    await new Promise(resolve => setTimeout(resolve, 250));
+  }
+  throw new Error('timeout: ' + label + ' :: ' + (last && last.message));
+}
+
+function assert(cond, msg) {
+  if (!cond) throw new Error('ASSERT: ' + msg);
+}
+
+(async () => {
+  const child = spawn(CHROME, [
+    '--headless=new',
+    '--disable-gpu',
+    '--no-sandbox',
+    '--disable-dev-shm-usage',
+    '--remote-debugging-port=' + PORT,
+    '--user-data-dir=' + PROFILE,
+    '--window-size=1280,900',
+    'about:blank',
+  ], { stdio: ['ignore', 'pipe', 'pipe'], windowsHide: true });
+  child.stderr.on('data', () => {});
+
+  const errors = [];
+  const warnings = [];
+  const requestFailures = [];
+
+  try {
+    const pages = await waitFor(() => fetchJson(`http://127.0.0.1:${PORT}/json/list`), 'list');
+    const page = pages.find(p => p.type === 'page') || pages[0];
+    const ws = new WebSocket(page.webSocketDebuggerUrl);
+    await new Promise((resolve, reject) => {
+      ws.on('open', resolve);
+      ws.on('error', reject);
+    });
+
+    let nextId = 1;
+    const pending = new Map();
+    ws.on('message', m => {
+      const msg = JSON.parse(m.toString());
+      if (msg.id && pending.has(msg.id)) {
+        const { resolve, reject } = pending.get(msg.id);
+        pending.delete(msg.id);
+        if (msg.error) reject(new Error(msg.error.message));
+        else resolve(msg.result);
+        return;
+      }
+
+      if (msg.method === 'Runtime.consoleAPICalled') {
+        const type = msg.params.type;
+        const text = (msg.params.args || []).map(arg => arg.value !== undefined ? arg.value : arg.description).join(' ');
+        if (/cdn\.tailwindcss\.com should not be used in production/.test(text)) return;
+        if (type === 'error') errors.push(text);
+        else if (type === 'warning') warnings.push(text);
+      } else if (msg.method === 'Network.loadingFailed') {
+        requestFailures.push(msg.params);
+      } else if (msg.method === 'Network.responseReceived' && msg.params.response.status >= 500) {
+        requestFailures.push({ url: msg.params.response.url, status: msg.params.response.status });
+      }
+    });
+
+    function send(method, params = {}) {
+      const id = nextId++;
+      return new Promise((resolve, reject) => {
+        pending.set(id, { resolve, reject });
+        ws.send(JSON.stringify({ id, method, params }));
+      });
+    }
+
+    await send('Runtime.enable');
+    await send('Page.enable');
+    await send('Network.enable');
+
+    await send('Page.navigate', { url: TARGET_URL });
+    await waitFor(async () => {
+      const r = await send('Runtime.evaluate', {
+        expression: 'document.readyState === "complete" && document.querySelector("#app") && /Control Center|控制中心/.test(document.querySelector("#app").innerText)',
+        returnByValue: true,
+      });
+      return r.result.value === true;
+    }, '#app to render control center', 15000);
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    let r = await send('Runtime.evaluate', {
+      expression: 'document.querySelector("#app") && document.querySelector("#app").innerHTML.trim()',
+      returnByValue: true,
+    });
+    const appHtml = r.result.value;
+    assert(appHtml && appHtml.length > 500, `appHtml too short: ${(appHtml || '').length}`);
+    assert(!appHtml.includes('<!---->') || appHtml.indexOf('header') >= 0, 'app rendered as comment');
+
+    r = await send('Runtime.evaluate', {
+      expression: 'document.querySelector("h1") ? document.querySelector("h1").innerText : ""',
+      returnByValue: true,
+    });
+    assert(/Project Supervision|项目监督/.test(r.result.value), 'header missing');
+
+    r = await send('Runtime.evaluate', {
+      expression: 'Array.from(document.querySelectorAll("button, a")).map(e => e.innerText.trim()).filter(Boolean)',
+      returnByValue: true,
+    });
+    const navText = r.result.value;
+    assert(navText.some(t => /^Dashboard|^仪表盘/.test(t)), 'Dashboard nav missing');
+    assert(navText.some(t => /^Import|^导入/.test(t)), 'Import nav missing');
+    assert(navText.some(t => /^AI Profiles|^AI 配置/.test(t)), 'AI Profiles nav missing');
+    assert(navText.some(t => /^Runs \/ Drafts|^运行 \/ 草稿/.test(t)), 'Runs / Drafts nav missing');
+    assert(navText.some(t => /^Schedule|^定时任务/.test(t)), 'Schedule nav missing');
+    assert(navText.some(t => /^Logs|^日志/.test(t)), 'Logs nav missing');
+
+    r = await send('Runtime.evaluate', {
+      expression: 'document.body.innerText',
+      returnByValue: true,
+    });
+    const bodyText = r.result.value;
+    assert(/Project Operations|项目操作/.test(bodyText), 'project operations panel missing');
+    assert(/Running Jobs|运行中的任务/.test(bodyText), 'running jobs panel missing');
+    assert(/Repo|仓库/.test(bodyText), 'repo status missing');
+
+    r = await send('Runtime.evaluate', {
+      expression: 'getComputedStyle(document.querySelector("aside")).backgroundColor',
+      returnByValue: true,
+    });
+    assert(!/^rgba?\(255,\s*255,\s*255/.test(r.result.value), `sidebar background is not themed: ${r.result.value}`);
+
+    r = await send('Runtime.evaluate', {
+      expression: 'Array.from(document.body.innerText.matchAll(/[0-9a-f]{7,40}/g)).map(m => m[0]).slice(0, 5)',
+      returnByValue: true,
+    });
+    assert(r.result.value.length >= 1, 'no commit hash rendered');
+
+    await send('Page.reload', { ignoreCache: true });
+    await new Promise(resolve => setTimeout(resolve, 5000));
+    r = await send('Runtime.evaluate', {
+      expression: '/Project Supervision|项目监督/.test(document.body.innerText) && /Project Operations|项目操作/.test(document.body.innerText)',
+      returnByValue: true,
+    });
+    assert(r.result.value, 'after reload dashboard did not render');
+
+    r = await send('Runtime.evaluate', {
+      expression: '(() => { const btn = Array.from(document.querySelectorAll("button, a")).find(b => /^Schedule|^定时任务/.test(b.innerText)); if (btn) btn.click(); return btn ? btn.innerText : "NO BTN"; })()',
+      returnByValue: true,
+    });
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    r = await send('Runtime.evaluate', {
+      expression: '/Schedule|定时任务/.test(document.body.innerText) && /Controls|控制/.test(document.body.innerText)',
+      returnByValue: true,
+    });
+    assert(r.result.value, 'Schedule tab did not render its content');
+
+    r = await send('Runtime.evaluate', {
+      expression: '(() => { const btn = Array.from(document.querySelectorAll("button, a")).find(b => /Runs \\/ Drafts|运行 \\/ 草稿/.test(b.innerText)); if (btn) btn.click(); return btn ? btn.innerText : "NO BTN"; })()',
+      returnByValue: true,
+    });
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    r = await send('Runtime.evaluate', {
+      expression: '/Runs|运行/.test(document.body.innerText) && /Drafts|草稿/.test(document.body.innerText)',
+      returnByValue: true,
+    });
+    assert(r.result.value, 'Runs / Drafts tab did not render its content');
+
+    r = await send('Runtime.evaluate', {
+      expression: '(() => { const btn = Array.from(document.querySelectorAll("button, a")).find(b => /^AI Profiles|^AI 配置/.test(b.innerText)); if (btn) btn.click(); return btn ? btn.innerText : "NO BTN"; })()',
+      returnByValue: true,
+    });
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    r = await send('Runtime.evaluate', {
+      expression: '/Knowledge output language|知识库输出语言/.test(document.body.innerText)',
+      returnByValue: true,
+    });
+    assert(r.result.value, 'AI language setting did not render');
+
+    const shot = await send('Page.captureScreenshot', { format: 'png', fullPage: true });
+    fs.writeFileSync(path.join(OUT_DIR, 'smoke-final.png'), Buffer.from(shot.data, 'base64'));
+
+    assert(errors.length === 0, `console errors: ${JSON.stringify(errors, null, 2)}`);
+    assert(requestFailures.length === 0, `request failures: ${JSON.stringify(requestFailures, null, 2)}`);
+
+    console.log('UI smoke test passed');
+    console.log('  - nav items:', navText.length);
+    console.log('  - warnings:', warnings.length);
+    console.log('  - errors:', errors.length);
+    ws.close();
+  } catch (e) {
+    console.error('UI smoke test failed:', e.message);
+    if (errors.length) console.error('console errors:', JSON.stringify(errors, null, 2));
+    if (requestFailures.length) console.error('request failures:', JSON.stringify(requestFailures, null, 2));
+    process.exitCode = 1;
+  } finally {
+    try { child.kill(); } catch {}
+  }
+})();

package/_site/_test/ui-test.js

@@ -0,0 +1,237 @@
+// Playwright UI test for KB management site
+// Run: NODE_PATH="..." node _test/ui-test.js
+const { chromium } = require('playwright');
+const path = require('path');
+const fs = require('fs');
+
+const SCREENSHOT_DIR = path.resolve(__dirname, 'screenshots');
+const REPORT_PATH = path.resolve(__dirname, 'ui-test-report.json');
+const URL = 'http://localhost:7777/';
+
+if (!fs.existsSync(SCREENSHOT_DIR)) fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
+
+const results = [];
+let stepNum = 0;
+
+function record(name, status, details) {
+  stepNum++;
+  const entry = { step: stepNum, name, status, ...details };
+  results.push(entry);
+  const icon = status === 'PASS' ? '✓' : (status === 'FAIL' ? '✗' : '⚠');
+  console.log(`  ${icon} [${status}] ${name}${details.note ? ' — ' + details.note : ''}`);
+  return entry;
+}
+
+async function shot(page, name) {
+  const filename = `${String(stepNum).padStart(2, '0')}-${name}.png`;
+  const filepath = path.join(SCREENSHOT_DIR, filename);
+  await page.screenshot({ path: filepath, fullPage: true });
+  return filepath;
+}
+
+(async () => {
+  console.log('============================================');
+  console.log('  UI TEST — Playwright + Chromium headless');
+  console.log('============================================\n');
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1400, height: 900 } });
+  const page = await context.newPage();
+
+  // Track dialogs without auto-accepting (we want to verify the prompts, not click through them)
+  // Default: dismiss dialogs so test actions are non-destructive
+  page.on('dialog', d => d.dismiss().catch(() => {}));
+
+  // ==== Initial load ====
+  console.log('▶ Initial load');
+  await page.goto(URL, { waitUntil: 'networkidle' });
+  await page.waitForSelector('#app article', { timeout: 5000 });
+  const initialShot = await shot(page, '01-projects-initial');
+  const projectCount = await page.locator('#app article').count();
+  record('Page loads with project cards', projectCount === 6 ? 'PASS' : 'FAIL', {
+    note: `${projectCount} cards rendered`,
+    screenshot: initialShot,
+  });
+
+  // ==== Verify tokenrank-cloud card is present ====
+  const tclCard = page.locator('article:has-text("TokenRank Cloud")');
+  const tclVisible = await tclCard.isVisible();
+  record('TokenRank Cloud card visible', tclVisible ? 'PASS' : 'FAIL', {
+    note: tclVisible ? 'card found' : 'card not found',
+    screenshot: initialShot,
+  });
+
+  // ==== Verify "KB ready" badge for tokenrank-cloud ====
+  const tclKbBadge = await tclCard.locator('text=✓ KB ready').count();
+  record('TokenRank Cloud shows "KB ready" badge', tclKbBadge > 0 ? 'PASS' : 'FAIL', {
+    note: tclKbBadge > 0 ? 'badge present' : 'badge missing',
+  });
+
+  // ==== Click "View tree" on tokenrank-cloud ====
+  console.log('\n▶ Projects tab — View tree');
+  const viewTreeBtn = tclCard.locator('button:has-text("View tree")');
+  await viewTreeBtn.click();
+  await page.waitForTimeout(500);
+  const treeDetails = tclCard.locator('details');
+  const treeSummary = await treeDetails.locator('summary').textContent();
+  const treeItems = await tclCard.locator('details li').count();
+  const treeShot = await shot(page, '02-tree-expanded');
+  record('View tree expands project tree', treeItems > 0 ? 'PASS' : 'FAIL', {
+    note: `${treeItems} entries (summary: ${treeSummary})`,
+    screenshot: treeShot,
+  });
+
+  // ==== Close the tree ====
+  await viewTreeBtn.click();
+  await page.waitForTimeout(200);
+
+  // ==== "+ Add" tab ====
+  console.log('\n▶ + Add tab');
+  await page.click('button:has-text("+ Add")');
+  await page.waitForSelector('form');
+  const addShot1 = await shot(page, '03-add-empty');
+  record('+ Add tab shows form', true, { note: 'form visible', screenshot: addShot1 });
+
+  // ==== Fill the form with a test entry ====
+  await page.fill('input[placeholder="my-new-project"]', 'ui-test-proj');
+  await page.fill('input[placeholder="My New Project"]', 'UI Test Project');
+  await page.fill('input[placeholder^="D:\\\\SanQian.Xu"]', 'D:\\SanQian.Xu\\UI-Test-Project');
+  await page.fill('input[placeholder="TypeScript"]', 'TypeScript');
+  await page.fill('input[placeholder="react, vite, api"]', 'ui, test, demo');
+  const filledShot = await shot(page, '04-add-filled');
+  record('Form fields fill correctly', true, { note: 'all fields filled', screenshot: filledShot });
+
+  // ==== Reset button ====
+  await page.click('button:has-text("Reset")');
+  await page.waitForTimeout(200);
+  const slugValue = await page.inputValue('input[placeholder="my-new-project"]');
+  record('Reset button clears form', slugValue === '' ? 'PASS' : 'FAIL', {
+    note: 'slug input is empty',
+  });
+
+  // ==== Schedule & Run tab ====
+  console.log('\n▶ Schedule & Run tab');
+  await page.click('button:has-text("Schedule & Run")');
+  await page.waitForSelector('text=Current status');
+  const schedShot1 = await shot(page, '05-schedule-initial');
+  const stateText = await page.locator('div.flex.justify-between:has(span:text("State:"))').last().locator('span').nth(1).textContent().catch(() => '?');
+  const nextRunText = await page.locator('div.flex.justify-between:has(span:text("Next run:"))').last().locator('span').nth(1).textContent().catch(() => '?');
+  record('Schedule card shows current state', stateText.includes('Ready') ? 'PASS' : 'FAIL', {
+    note: `state=${stateText.trim()}, nextRun=${nextRunText.trim()}`,
+    screenshot: schedShot1,
+  });
+
+  // ==== Change frequency to hourly ====
+  await page.selectOption('select', 'hourly');
+  await page.waitForTimeout(200);
+  const hourlyShot = await shot(page, '06-frequency-hourly');
+  record('Frequency dropdown accepts "Hourly"', true, { note: 'selected', screenshot: hourlyShot });
+
+  // ==== Click Apply ====
+  await page.click('button:has-text("Apply")');
+  await page.waitForSelector('text=Schedule updated', { timeout: 5000 }).catch(() => {});
+  await page.waitForTimeout(500);
+  const appliedShot = await shot(page, '07-schedule-applied');
+  const appliedMsg = await page.locator('text=Schedule updated').count();
+  record('Apply button updates schedule', appliedMsg > 0 ? 'PASS' : 'FAIL', {
+    note: appliedMsg > 0 ? 'success message shown' : 'no success message',
+    screenshot: appliedShot,
+  });
+
+  // ==== Verify state changed ====
+  await page.waitForTimeout(800);
+  const stateAfter = await page.locator('div.flex.justify-between:has(span:text("State:"))').last().locator('span').nth(1).textContent().catch(() => '?');
+  record('Schedule state remains Ready after change', stateAfter.includes('Ready') ? 'PASS' : 'FAIL', {
+    note: `state=${stateAfter.trim()}`,
+  });
+
+  // ==== Restore: change back to Daily 08:00 ====
+  await page.selectOption('select', 'daily');
+  await page.waitForTimeout(200);
+  // Set time to 08:00
+  await page.fill('input[type="time"]', '08:00');
+  await page.click('button:has-text("Apply")');
+  await page.waitForTimeout(1500);
+  const restoredShot = await shot(page, '08-schedule-restored');
+  const scheduleTypeText = await page.locator('text=Schedule Type:').locator('xpath=following-sibling::*[1]').textContent().catch(() => '?');
+  const startTimeText = await page.locator('text=Start Time:').locator('xpath=following-sibling::*[1]').textContent().catch(() => '?');
+  // Note: schedule card may not show Schedule Type / Start Time. The data is in raw map but not exposed.
+  // So just check the message
+  record('Restore daily 08:00', true, {
+    note: 'applied, schedule type=' + scheduleTypeText.trim() + ', startTime=' + startTimeText.trim(),
+    screenshot: restoredShot,
+  });
+
+  // ==== Run now with tokenrank-cloud (will fail, but should display error) ====
+  console.log('\n▶ Run now');
+  await page.selectOption('select:near(:text("Project slug"))', 'tokenrank-cloud').catch(async () => {
+    // Alternative: the select for runSlug is the second one on the page
+    const selects = page.locator('select');
+    await selects.last().selectOption('tokenrank-cloud');
+  });
+  await page.waitForTimeout(200);
+  // Alternative: locate the runSlug select by label
+  const runSelect = page.locator('label:has-text("Project slug")').locator('xpath=following::select[1]');
+  await runSelect.selectOption('tokenrank-cloud').catch(() => {});
+  await page.waitForTimeout(200);
+  const runSelectedShot = await shot(page, '09-run-selected');
+  record('Run slug dropdown works', true, { screenshot: runSelectedShot });
+
+  // Click Run now
+  await page.click('button:has-text("Run now")');
+  // Wait for log tab to appear
+  await page.waitForSelector('h2:has-text("Last run output")', { timeout: 10000 });
+  await page.waitForTimeout(2000);
+  const logShot = await shot(page, '10-log-output');
+  const logOutput = await page.locator('pre').textContent();
+  const hasOutput = logOutput && logOutput.length > 50;
+  const hasError = logOutput && (logOutput.includes('fatal') || logOutput.includes('cannot change to'));
+  record('Run now executes and shows output', hasOutput ? 'PASS' : 'FAIL', {
+    note: hasError ? 'error captured (expected for broken gitPath)' : 'no error in output',
+    screenshot: logShot,
+  });
+
+  // ==== Back to Projects ====
+  console.log('\n▶ Back to Projects');
+  await page.click('button:has-text("Projects")');
+  await page.waitForSelector('#app article');
+  await page.waitForTimeout(500);
+  const finalShot = await shot(page, '11-projects-final');
+  const finalCount = await page.locator('#app article').count();
+  record('Projects tab reloads with all 6 projects', finalCount === 6 ? 'PASS' : 'FAIL', {
+    note: `${finalCount} cards`,
+    screenshot: finalShot,
+  });
+
+  // ==== Verify "Remove" button shows confirm dialog ====
+  // We won't actually remove, just verify the dialog appears
+  console.log('\n▶ Remove confirm dialog');
+  let capturedMsg = null;
+  page.once('dialog', d => { capturedMsg = d.message(); d.dismiss().catch(() => {}); });
+  await page.click('article:has-text("TokenRank Cloud") button:has-text("Remove")');
+  await page.waitForTimeout(800);
+  if (capturedMsg) {
+    record('Remove shows confirm dialog', capturedMsg.includes('Remove project') ? 'PASS' : 'FAIL', {
+      note: `dialog text: ${capturedMsg.slice(0, 80)}…`,
+    });
+  } else {
+    record('Remove shows confirm dialog', 'FAIL', { note: 'no dialog appeared' });
+  }
+
+  // ==== Summary ====
+  await browser.close();
+
+  const pass = results.filter(r => r.status === 'PASS').length;
+  const fail = results.filter(r => r.status === 'FAIL').length;
+  const summary = { url: URL, total: results.length, pass, fail, results };
+
+  fs.writeFileSync(REPORT_PATH, JSON.stringify(summary, null, 2));
+  console.log('\n============================================');
+  console.log(`  UI TEST SUMMARY: ${pass}/${results.length} passed${fail ? ', ' + fail + ' failed' : ''}`);
+  console.log('============================================');
+  console.log(`  Report: ${REPORT_PATH}`);
+  console.log(`  Screenshots: ${SCREENSHOT_DIR}`);
+  process.exit(fail ? 1 : 0);
+})().catch(e => {
+  console.error('FATAL:', e);
+  process.exit(2);
+});