refactor: split web ui modules and harden provider switching

.github/workflows/ci.yml

@@ -13,6 +13,8 @@ jobs:
  steps:
  - name: Checkout
  uses: actions/checkout@v4
+ with:
+ fetch-depth: 0
  - name: Setup Node
  uses: actions/setup-node@v4
  with:
@@ -23,4 +25,6 @@ jobs:
  - name: Lint
  run: npm run lint --if-present
  - name: Test
+ env:
+ WEB_UI_PARITY_BASE_REF: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || '' }}
  run: npm run test --if-present

.github/workflows/coderabbit-review.yml

@@ -56,6 +56,7 @@ jobs:
  const body = [
  "@coderabbitai re-review",
  "Stop making breaking changes, do a proper review!",
+ "If I merge this directly, will it introduce any regressions? Please list only the impacted issues. Do not include style suggestions, speculative concerns, or already-resolved items.",
  `<!-- codexmate-coderabbit-review-commit-count: ${pr.commits} -->`,
  ].join("\n");
 

cli.js

@@ -62,6 +62,12 @@ const {
  validateWorkflowDefinition,
  executeWorkflowDefinition
 } = require('./lib/workflow-engine');
+const {
+ readBundledWebUiCss,
+ readBundledWebUiHtml,
+ readExecutableBundledJavaScriptModule,
+ readExecutableBundledWebUiScript
+} = require('./web-ui/source-bundle.cjs');
 
 const DEFAULT_WEB_PORT = 3737;
 const DEFAULT_WEB_HOST = '0.0.0.0';
@@ -9945,10 +9951,11 @@ function formatHostForUrl(host) {
  return value;
 }
 
+// #region watchPathsForRestart
 function watchPathsForRestart(targets, onChange) {
- const disposers = [];
  const debounceMs = 300;
  let timer = null;
+ const watcherEntries = new Map();
 
  const trigger = (info) => {
  if (timer) clearTimeout(timer);
@@ -9958,35 +9965,201 @@ function watchPathsForRestart(targets, onChange) {
  }, debounceMs);
  };
 
- const addWatcher = (target, recursive) => {
+ const closeWatcher = (watchKey) => {
+ const entry = watcherEntries.get(watchKey);
+ if (!entry) return;
+ watcherEntries.delete(watchKey);
+ try {
+ entry.watcher.close();
+ } catch (_) {}
+ };
+
+ const listDirectoryTree = (rootDir) => {
+ const queue = [rootDir];
+ const directories = [];
+ const seen = new Set();
+ while (queue.length) {
+ const current = queue.shift();
+ if (!current || seen.has(current) || !fs.existsSync(current)) {
+ continue;
+ }
+ seen.add(current);
+ let stat = null;
+ try {
+ stat = fs.statSync(current);
+ } catch (_) {
+ continue;
+ }
+ if (!stat || !stat.isDirectory()) {
+ continue;
+ }
+ directories.push(current);
+ let entries = [];
+ try {
+ entries = fs.readdirSync(current, { withFileTypes: true });
+ } catch (_) {
+ continue;
+ }
+ for (const entry of entries) {
+ if (entry && typeof entry.isDirectory === 'function' && entry.isDirectory()) {
+ queue.push(path.join(current, entry.name));
+ }
+ }
+ }
+ return directories;
+ };
+
+ const isSameOrNestedPath = (candidate, rootDir) => {
+ return candidate === rootDir || candidate.startsWith(`${rootDir}${path.sep}`);
+ };
+
+ const addWatcher = (target, recursive, isDirectory = false) => {
  if (!fs.existsSync(target)) return;
+ const watchKey = `${recursive ? 'recursive' : 'plain'}:${target}`;
+ if (watcherEntries.has(watchKey)) {
+ return true;
+ }
  try {
- const watcher = fs.watch(target, { recursive }, (eventType, filename) => {
+ const basename = isDirectory ? '' : path.basename(target);
+ const watchTarget = isDirectory ? target : path.dirname(target);
+ const watcher = fs.watch(watchTarget, { recursive }, (eventType, filename) => {
+ if (isDirectory && !recursive && eventType === 'rename') {
+ syncDirectoryTree(target);
+ }
  if (!filename) return;
- const lower = filename.toLowerCase();
- if (!(/\.(html|js|mjs|css)$/.test(lower))) return;
- trigger({ target, eventType, filename });
+ let normalizedFilename = String(filename).replace(/\\/g, '/');
+ if (!isDirectory) {
+ const fileNameOnly = normalizedFilename.split('/').pop();
+ if (fileNameOnly !== basename) {
+ return;
+ }
+ normalizedFilename = basename;
+ }
+ const lower = normalizedFilename.toLowerCase();
+ if (!(/\.(html|js|mjs|cjs|css)$/.test(lower))) return;
+ trigger({ target, eventType, filename: normalizedFilename });
+ });
+ watcher.on('error', () => {
+ closeWatcher(watchKey);
+ if (isDirectory && recursive && !fs.existsSync(target)) {
+ syncDirectoryTree(target);
+ addMissingDirectoryWatcher(target);
+ return;
+ }
+ if (isDirectory && !recursive) {
+ syncDirectoryTree(target);
+ } else if (fs.existsSync(target)) {
+ addWatcher(target, recursive, isDirectory);
+ }
+ });
+ watcherEntries.set(watchKey, {
+ watcher,
+ target,
+ recursive,
+ isDirectory
  });
- disposers.push(() => watcher.close());
  return true;
  } catch (e) {
  return false;
  }
  };
 
+ const addMissingDirectoryWatcher = (target) => {
+ const parentDir = path.dirname(target);
+ if (!parentDir || parentDir === target || !fs.existsSync(parentDir)) {
+ return false;
+ }
+ const watchKey = `missing-dir:${target}`;
+ if (watcherEntries.has(watchKey)) {
+ return true;
+ }
+ const basename = path.basename(target);
+ try {
+ const watcher = fs.watch(parentDir, { recursive: false }, (_eventType, filename) => {
+ if (!filename) return;
+ const fileNameOnly = String(filename).replace(/\\/g, '/').split('/').pop();
+ if (fileNameOnly !== basename) {
+ return;
+ }
+ if (!fs.existsSync(target)) {
+ syncDirectoryTree(target);
+ return;
+ }
+ closeWatcher(watchKey);
+ const ok = addWatcher(target, true, true);
+ if (!ok) {
+ syncDirectoryTree(target);
+ }
+ });
+ watcher.on('error', () => {
+ closeWatcher(watchKey);
+ if (fs.existsSync(parentDir) && !fs.existsSync(target)) {
+ addMissingDirectoryWatcher(target);
+ }
+ });
+ watcherEntries.set(watchKey, {
+ watcher,
+ target: parentDir,
+ recursive: false,
+ isDirectory: false
+ });
+ return true;
+ } catch (_) {
+ return false;
+ }
+ };
+
+ const syncDirectoryTree = (rootDir) => {
+ const directories = listDirectoryTree(rootDir);
+ const existingDirectorySet = new Set(directories);
+ for (const [watchKey, entry] of Array.from(watcherEntries.entries())) {
+ if (!entry.isDirectory || entry.recursive) {
+ continue;
+ }
+ if (!isSameOrNestedPath(entry.target, rootDir)) {
+ continue;
+ }
+ if (!existingDirectorySet.has(entry.target)) {
+ closeWatcher(watchKey);
+ }
+ }
+ for (const directory of directories) {
+ addWatcher(directory, false, true);
+ }
+ };
+
  for (const target of targets) {
- const ok = addWatcher(target, true);
+ if (!fs.existsSync(target)) continue;
+ let stat = null;
+ try {
+ stat = fs.statSync(target);
+ } catch (_) {
+ continue;
+ }
+ if (stat && stat.isDirectory()) {
+ const ok = addWatcher(target, true, true);
+ if (!ok) {
+ syncDirectoryTree(target);
+ }
+ continue;
+ }
+ const ok = addWatcher(target, true, false);
  if (!ok) {
- addWatcher(target, false);
+ addWatcher(target, false, false);
  }
  }
 
  return () => {
- for (const dispose of disposers) {
- try { dispose(); } catch (_) {}
+ if (timer) {
+ clearTimeout(timer);
+ timer = null;
+ }
+ for (const watchKey of Array.from(watcherEntries.keys())) {
+ closeWatcher(watchKey);
  }
  };
 }
+// #endregion watchPathsForRestart
 
 function writeJsonResponse(res, statusCode, payload) {
  const body = JSON.stringify(payload, null, 2);
@@ -10131,8 +10304,46 @@ async function handleImportSkillsZipUpload(req, res, options = {}) {
  }
 }
 
+const PUBLIC_WEB_UI_DYNAMIC_ASSETS = new Map([
+ ['app.js', {
+ mime: 'application/javascript; charset=utf-8',
+ reader: readExecutableBundledWebUiScript
+ }],
+ ['index.html', {
+ mime: 'text/html; charset=utf-8',
+ reader: readBundledWebUiHtml
+ }],
+ ['logic.mjs', {
+ mime: 'application/javascript; charset=utf-8',
+ reader: readExecutableBundledJavaScriptModule
+ }],
+ ['styles.css', {
+ mime: 'text/css; charset=utf-8',
+ reader: readBundledWebUiCss
+ }]
+]);
+
+const PUBLIC_WEB_UI_STATIC_ASSETS = new Set([
+ 'modules/config-mode.computed.mjs',
+ 'modules/skills.computed.mjs',
+ 'modules/skills.methods.mjs',
+ 'session-helpers.mjs'
+]);
+
 function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser }) {
  const connections = new Set();
+ const writeWebUiAssetError = (res, requestPath, error) => {
+ const message = error && error.message ? error.message : String(error);
+ console.error(`! Web UI 资源读取失败 [${requestPath}]:`, message);
+ if (res.headersSent) {
+ try {
+ res.destroy(error);
+ } catch (_) {}
+ return;
+ }
+ res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
+ res.end('Internal Server Error');
+ };
 
  const server = http.createServer((req, res) => {
  const requestPath = (req.url || '/').split('?')[0];
@@ -10562,6 +10773,14 @@ function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser
  res.end(errorBody, 'utf-8');
  }
  });
+ } else if (requestPath === '/web-ui') {
+ try {
+ const html = readBundledWebUiHtml(htmlPath);
+ res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+ res.end(html);
+ } catch (error) {
+ writeWebUiAssetError(res, requestPath, error);
+ }
  } else if (requestPath.startsWith('/web-ui/')) {
  const normalized = path.normalize(requestPath).replace(/^([\\.\\/])+/, '');
  const filePath = path.join(__dirname, normalized);
@@ -10570,6 +10789,23 @@ function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser
  res.end('Forbidden');
  return;
  }
+ const relativePath = path.relative(webDir, filePath).replace(/\\/g, '/');
+ const dynamicAsset = PUBLIC_WEB_UI_DYNAMIC_ASSETS.get(relativePath);
+ if (dynamicAsset) {
+ try {
+ const assetBody = dynamicAsset.reader(filePath);
+ res.writeHead(200, { 'Content-Type': dynamicAsset.mime });
+ res.end(assetBody, 'utf-8');
+ } catch (error) {
+ writeWebUiAssetError(res, requestPath, error);
+ }
+ return;
+ }
+ if (!PUBLIC_WEB_UI_STATIC_ASSETS.has(relativePath)) {
+ res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+ res.end('Not Found');
+ return;
+ }
  if (!fs.existsSync(filePath) || !fs.statSync(filePath).isFile()) {
  res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
  res.end('Not Found');
@@ -10642,9 +10878,13 @@ function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser
  res.writeHead(200, { 'Content-Type': mime });
  fs.createReadStream(filePath).pipe(res);
  } else {
- const html = fs.readFileSync(htmlPath, 'utf-8');
- res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
- res.end(html);
+ try {
+ const html = readBundledWebUiHtml(htmlPath);
+ res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+ res.end(html);
+ } catch (error) {
+ writeWebUiAssetError(res, requestPath, error);
+ }
  }
  });
 

tests/e2e/run.js

@@ -23,6 +23,7 @@ const testMessages = require('./test-messages');
 const testMcp = require('./test-mcp');
 const testWorkflow = require('./test-workflow');
 const testInvalidConfig = require('./test-invalid-config');
+const testWebUiAssets = require('./test-web-ui-assets');
 
 async function main() {
  const realHome = os.homedir();
@@ -118,6 +119,7 @@ async function main() {
  await testMessages(ctx);
  await testMcp(ctx);
  await testWorkflow(ctx);
+ await testWebUiAssets(ctx);
 
  } finally {
  const waitForExit = new Promise((resolve) => {