crewswarm 0.8.1-beta

package/apps/vibe/src/register-all-languages.js

@@ -0,0 +1,98 @@
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+
+const languageContributionModules = {
+  css: () => import("monaco-editor/esm/vs/basic-languages/css/css.contribution.js"),
+  html: () => import("monaco-editor/esm/vs/basic-languages/html/html.contribution.js"),
+  javascript: () => import("monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js"),
+  markdown: () => import("monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution.js"),
+  python: () => import("monaco-editor/esm/vs/basic-languages/python/python.contribution.js"),
+  typescript: () => import("monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js"),
+};
+
+const contributionIds = Object.keys(languageContributionModules).sort();
+const registeredLanguageIds = new Set(
+  monaco.languages.getLanguages().map((language) => language.id),
+);
+const loadingLanguagePromises = new Map();
+
+function syncBootstrapState() {
+  const readyLanguageIds = contributionIds
+    .filter((languageId) => registeredLanguageIds.has(languageId))
+    .sort();
+
+  window.__studioMonacoLanguageBootstrap = {
+    expectedLanguageIds: contributionIds,
+    registeredLanguageIds: readyLanguageIds,
+    assetFiles: contributionIds.map((languageId) => `${languageId}.contribution.js`),
+    hasLanguage(id) {
+      return registeredLanguageIds.has(id);
+    },
+  };
+
+  return readyLanguageIds;
+}
+
+async function ensureLanguageRegistered(languageId) {
+  if (!languageId || registeredLanguageIds.has(languageId)) {
+    return registeredLanguageIds.has(languageId);
+  }
+
+  const load = languageContributionModules[languageId];
+  if (!load) {
+    return false;
+  }
+
+  if (!loadingLanguagePromises.has(languageId)) {
+    loadingLanguagePromises.set(
+      languageId,
+      load()
+        .then(() => {
+          registeredLanguageIds.add(languageId);
+          syncBootstrapState();
+          return true;
+        })
+        .catch((error) => {
+          loadingLanguagePromises.delete(languageId);
+          throw error;
+        }),
+    );
+  }
+
+  return loadingLanguagePromises.get(languageId);
+}
+
+function scheduleBackgroundRegistration() {
+  const run = async () => {
+    for (const languageId of contributionIds) {
+      await ensureLanguageRegistered(languageId);
+    }
+
+    const readyLanguageIds = syncBootstrapState();
+    console.info("[studio] Monaco language bootstrap ready", readyLanguageIds);
+    return readyLanguageIds;
+  };
+
+  const start = () =>
+    run().catch((error) => {
+      console.error("[studio] Monaco language bootstrap failed", error);
+      throw error;
+    });
+
+  if (typeof window.requestIdleCallback === "function") {
+    return new Promise((resolve, reject) => {
+      window.requestIdleCallback(() => {
+        start().then(resolve).catch(reject);
+      });
+    });
+  }
+
+  return new Promise((resolve, reject) => {
+    window.setTimeout(() => {
+      start().then(resolve).catch(reject);
+    }, 0);
+  });
+}
+
+syncBootstrapState();
+window.__studioEnsureLanguageRegistered = ensureLanguageRegistered;
+window.__studioLanguageRegistrationReady = scheduleBackgroundRegistration();

package/apps/vibe/start-studio.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+cd "$(dirname "$0")"
+
+if [ ! -d node_modules ]; then
+  npm install
+fi
+
+npm run build
+exec npm start

package/apps/vibe/test/accessibility-tests.js

@@ -0,0 +1,77 @@
+import assert from "node:assert/strict";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.resolve(__dirname, "..");
+
+async function read(relativePath) {
+  return fs.readFile(path.join(rootDir, relativePath), "utf8");
+}
+
+function test(name, fn) {
+  return { name, fn };
+}
+
+async function runTests(label, tests) {
+  let passed = 0;
+  for (const current of tests) {
+    try {
+      await current.fn();
+      passed += 1;
+      console.log(`PASS ${label}: ${current.name}`);
+    } catch (error) {
+      console.error(`FAIL ${label}: ${current.name}`);
+      throw error;
+    }
+  }
+  console.log(`${label} suite passed (${passed}/${tests.length})`);
+}
+
+export async function runAccessibilityTests() {
+  const [html, appSource] = await Promise.all([
+    read("index.html"),
+    read("src/main.js"),
+  ]);
+
+  const tests = [
+    test("document declares language metadata", () => {
+      assert.match(html, /<html[^>]*lang="en"/i);
+      assert.match(html, /<meta name="viewport" content="width=device-width,\s*initial-scale=1\.0"/i);
+    }),
+    test("primary application shell is present", () => {
+      assert.match(html, /<div[^>]+id="app"/i);
+    }),
+    test("icon-only controls expose accessible names", () => {
+      assert.match(html, /aria-label="Toggle color theme"/);
+      assert.match(html, /aria-label="Open settings panel"/);
+      assert.match(html, /aria-label="Toggle keyboard shortcuts guide"/);
+      assert.match(html, /aria-label="Interactive terminal"/);
+    }),
+    test("overlay panels are labelled by their titles", () => {
+      assert.match(html, /id="settings-panel"[\s\S]*aria-labelledby="settings-panel-title"/);
+      assert.match(html, /id="shortcuts-panel"[\s\S]*aria-labelledby="shortcuts-panel-title"/);
+      assert.match(html, /id="diff-preview-overlay"[\s\S]*aria-labelledby="diff-preview-title"/);
+    }),
+    test("terminal panel starts hidden for assistive tech", () => {
+      assert.match(html, /id="bottom-terminal-panel"[^>]*aria-hidden="true"/);
+    }),
+    test("keyboard escape handling closes open overlays", () => {
+      assert.match(html, /if \(event\.key === "Escape" && settingsPanel\?\.classList\.contains\("visible"\)\)/);
+      assert.match(html, /setSettingsPanelOpen\(false\)/);
+      assert.match(html, /setShortcutsPanelOpen\(false\)/);
+    }),
+  ];
+
+  await runTests("accessibility", tests);
+}
+
+const invokedDirectly = process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url);
+
+if (invokedDirectly) {
+  runAccessibilityTests().catch((error) => {
+    console.error(error.stack || error.message);
+    process.exitCode = 1;
+  });
+}

package/apps/vibe/test/browser-performance-audit.mjs

@@ -0,0 +1,205 @@
+import assert from "node:assert/strict";
+import { once } from "node:events";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { spawn } from "node:child_process";
+import { setTimeout as delay } from "node:timers/promises";
+import { fileURLToPath } from "node:url";
+import { chromium } from "playwright";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.resolve(__dirname, "..");
+const reportDir = path.join(rootDir, "output");
+const reportPath = path.join(reportDir, "performance-audit.json");
+const port = Number(process.env.STUDIO_AUDIT_PORT || 3345);
+const baseUrl = `http://127.0.0.1:${port}`;
+
+const BUDGETS = {
+  domContentLoadedMs: 2500,
+  loadMs: 4000,
+  lcpMs: 2500,
+  resourceCount: 40,
+  totalTransferBytes: 1_500_000,
+  jsHeapUsedBytes: 80 * 1024 * 1024,
+  longTasks: 3,
+};
+
+async function ensureBuildOutput() {
+  await fs.access(path.join(rootDir, "dist", "index.html"));
+}
+
+async function waitForServer(url, timeoutMs = 15_000) {
+  const deadline = Date.now() + timeoutMs;
+  let lastError = null;
+
+  while (Date.now() < deadline) {
+    try {
+      const response = await fetch(url);
+      if (response.ok) {
+        return;
+      }
+      lastError = new Error(`HTTP ${response.status}`);
+    } catch (error) {
+      lastError = error;
+    }
+    await delay(250);
+  }
+
+  throw lastError || new Error("Studio server did not become ready");
+}
+
+function startServer() {
+  const child = spawn(process.execPath, ["server.mjs"], {
+    cwd: rootDir,
+    env: {
+      ...process.env,
+      STUDIO_PORT: String(port),
+    },
+    stdio: "ignore",
+  });
+  return child;
+}
+
+async function collectMetrics() {
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage();
+  const cdp = await page.context().newCDPSession(page);
+
+  await page.addInitScript(() => {
+    window.__studioPerf = {
+      lcp: 0,
+      cls: 0,
+      longTasks: 0,
+      longTaskTime: 0,
+    };
+
+    new PerformanceObserver((list) => {
+      const entries = list.getEntries();
+      const lastEntry = entries.at(-1);
+      if (lastEntry) {
+        window.__studioPerf.lcp = lastEntry.startTime;
+      }
+    }).observe({ type: "largest-contentful-paint", buffered: true });
+
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        if (!entry.hadRecentInput) {
+          window.__studioPerf.cls += entry.value;
+        }
+      }
+    }).observe({ type: "layout-shift", buffered: true });
+
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        window.__studioPerf.longTasks += 1;
+        window.__studioPerf.longTaskTime += entry.duration;
+      }
+    }).observe({ type: "longtask", buffered: true });
+  });
+
+  await cdp.send("Performance.enable");
+  await page.goto(baseUrl, { waitUntil: "domcontentloaded", timeout: 15_000 });
+  await page.waitForLoadState("load", { timeout: 15_000 });
+  await delay(750);
+
+  const browserMetrics = await cdp.send("Performance.getMetrics");
+  const runtimeMetrics = await page.evaluate(() => {
+    const navigation = performance.getEntriesByType("navigation")[0];
+    const resources = performance.getEntriesByType("resource");
+    const totals = resources.reduce(
+      (acc, entry) => {
+        acc.transferSize += entry.transferSize || 0;
+        if (entry.initiatorType === "script") {
+          acc.scriptTransferSize += entry.transferSize || 0;
+        }
+        return acc;
+      },
+      { transferSize: 0, scriptTransferSize: 0 },
+    );
+
+    return {
+      domContentLoadedMs: navigation?.domContentLoadedEventEnd || 0,
+      loadMs: navigation?.loadEventEnd || 0,
+      resourceCount: resources.length,
+      totalTransferBytes: totals.transferSize,
+      scriptTransferBytes: totals.scriptTransferSize,
+      lcpMs: window.__studioPerf?.lcp || 0,
+      cls: window.__studioPerf?.cls || 0,
+      longTasks: window.__studioPerf?.longTasks || 0,
+      longTaskTimeMs: window.__studioPerf?.longTaskTime || 0,
+    };
+  });
+
+  await browser.close();
+
+  const cdpMetricMap = Object.fromEntries(
+    browserMetrics.metrics.map((metric) => [metric.name, metric.value]),
+  );
+
+  return {
+    collectedAt: new Date().toISOString(),
+    url: baseUrl,
+    budgets: BUDGETS,
+    metrics: {
+      ...runtimeMetrics,
+      jsHeapUsedBytes: cdpMetricMap.JSHeapUsedSize || 0,
+      nodes: cdpMetricMap.Nodes || 0,
+      documents: cdpMetricMap.Documents || 0,
+    },
+  };
+}
+
+function evaluateBudgets(report) {
+  const { metrics } = report;
+
+  const checks = [
+    ["domContentLoadedMs", metrics.domContentLoadedMs <= BUDGETS.domContentLoadedMs],
+    ["loadMs", metrics.loadMs <= BUDGETS.loadMs],
+    ["resourceCount", metrics.resourceCount <= BUDGETS.resourceCount],
+    ["totalTransferBytes", metrics.totalTransferBytes <= BUDGETS.totalTransferBytes],
+    ["jsHeapUsedBytes", metrics.jsHeapUsedBytes <= BUDGETS.jsHeapUsedBytes],
+    ["longTasks", metrics.longTasks <= BUDGETS.longTasks],
+  ];
+
+  if (metrics.lcpMs > 0) {
+    checks.push(["lcpMs", metrics.lcpMs <= BUDGETS.lcpMs]);
+  }
+
+  report.checks = checks.map(([name, pass]) => ({ name, pass }));
+  report.ok = report.checks.every((check) => check.pass);
+}
+
+async function main() {
+  await ensureBuildOutput();
+  await fs.mkdir(reportDir, { recursive: true });
+
+  console.log("Starting Studio server for performance audit...");
+  const server = startServer();
+
+  try {
+    console.log("Waiting for Studio server...");
+    await waitForServer(baseUrl);
+    console.log("Collecting browser metrics...");
+    const report = await collectMetrics();
+    console.log("Evaluating budgets...");
+    evaluateBudgets(report);
+    await fs.writeFile(reportPath, `${JSON.stringify(report, null, 2)}\n`, "utf8");
+
+    console.log(`Performance audit written to ${reportPath}`);
+    report.checks.forEach((check) => {
+      console.log(`${check.pass ? "PASS" : "FAIL"} ${check.name}`);
+    });
+
+    assert.ok(report.ok, "Studio performance audit exceeded one or more budgets");
+  } finally {
+    if (server.exitCode === null && !server.killed) {
+      server.kill("SIGTERM");
+      await Promise.race([once(server, "exit"), delay(2_000)]);
+    }
+  }
+}
+
+main().catch((error) => {
+  console.error(error.stack || error.message);
+  process.exitCode = 1;
+});

package/apps/vibe/test/performance-tests.js

@@ -0,0 +1,120 @@
+import assert from "node:assert/strict";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.resolve(__dirname, "..");
+
+async function read(relativePath) {
+  return fs.readFile(path.join(rootDir, relativePath), "utf8");
+}
+
+async function stat(relativePath) {
+  return fs.stat(path.join(rootDir, relativePath));
+}
+
+function test(name, fn) {
+  return { name, fn };
+}
+
+async function runTests(label, tests) {
+  let passed = 0;
+  for (const current of tests) {
+    try {
+      await current.fn();
+      passed += 1;
+      console.log(`PASS ${label}: ${current.name}`);
+    } catch (error) {
+      console.error(`FAIL ${label}: ${current.name}`);
+      throw error;
+    }
+  }
+  console.log(`${label} suite passed (${passed}/${tests.length})`);
+}
+
+export async function runPerformanceTests() {
+  const [html, appSource, serverSource, viteConfig] = await Promise.all([
+    read("index.html"),
+    read("src/main.js"),
+    read("server.mjs"),
+    read("vite.config.js"),
+  ]);
+  const distAssets = await fs.readdir(path.join(rootDir, "dist", "assets"));
+  const jsAssets = distAssets.filter((name) => name.endsWith(".js"));
+  const cssAssets = distAssets.filter((name) => name.endsWith(".css"));
+  const indexBundle = jsAssets.find((name) => /^index-.*\.js$/.test(name));
+  const indexBundleStat = indexBundle ? await stat(path.join("dist", "assets", indexBundle)) : null;
+
+  const tests = [
+    test("build output includes JavaScript and CSS assets", () => {
+      assert.ok(jsAssets.length > 0, "expected built JavaScript assets");
+      assert.ok(cssAssets.length > 0, "expected built CSS assets");
+    }),
+    test("main bundle stays below a 3 MB guardrail", () => {
+      assert.ok(indexBundleStat, "expected a built index bundle");
+      assert.ok(indexBundleStat.size < 3 * 1024 * 1024, `bundle too large: ${indexBundleStat.size}`);
+    }),
+    test("index.html avoids external font and CDN preconnects", () => {
+      assert.match(html, /System font stack only to avoid CORS/i);
+      assert.doesNotMatch(html, /<link rel="preconnect"/i);
+    }),
+    test("Monaco is loaded lazily through dynamic imports", () => {
+      assert.match(appSource, /async function loadMonaco\(/);
+      assert.match(appSource, /import\("monaco-editor\/esm\/vs\/editor\/editor\.api"\)/);
+    }),
+    test("editor renders a lightweight placeholder before Monaco loads", () => {
+      assert.match(appSource, /function renderEditorPlaceholder\(/);
+      assert.match(appSource, /Editor loads on demand/);
+    }),
+    test("explorer hides heavy generated directories from scans", () => {
+      assert.match(appSource, /relativePath\.startsWith\("dist\/"\)/);
+      assert.match(appSource, /relativePath\.startsWith\("node_modules\/"\)/);
+      assert.match(appSource, /relativePath\.startsWith\("output\/"\)/);
+    }),
+    test("static server serves immutable cache headers for hashed assets", () => {
+      assert.match(serverSource, /return "public, max-age=31536000, immutable";/);
+    }),
+    test("static server can serve precompressed assets", () => {
+      assert.match(serverSource, /if \(acceptEncoding\.includes\("br"\)\)/);
+      assert.match(serverSource, /if \(acceptEncoding\.includes\("gzip"\)\)/);
+    }),
+    test("Vite build targets the dist assets directory explicitly", () => {
+      assert.match(viteConfig, /outDir:\s*["']dist["']/);
+      assert.match(viteConfig, /assetsDir:\s*["']assets["']/);
+    }),
+    test("workspace scans cap file enumeration to avoid runaway traversal", () => {
+      assert.match(serverSource, /const MAX_FILES = 800;/);
+      assert.match(serverSource, /if \(depth > 6 \|\| results\.length >= MAX_FILES\) return;/);
+    }),
+    test("workspace scans use a short-lived cache with targeted invalidation", () => {
+      assert.match(serverSource, /const WORKSPACE_SCAN_CACHE_TTL_MS = Number\(process\.env\.STUDIO_SCAN_CACHE_TTL_MS \|\| 1_500\);/);
+      assert.match(serverSource, /workspaceScanCache\.set\(resolvedScanDir,\s*\{/);
+      assert.match(serverSource, /invalidateWorkspaceScanCache\(resolvedPath\);/);
+    }),
+    test("audit cache is tracked and invalidated alongside workspace scans", () => {
+      assert.match(serverSource, /const auditFileCache = new Map\(\);/);
+      assert.match(serverSource, /for \(const cache of \[workspaceScanCache, auditFileCache\]\)/);
+    }),
+    test("file tree refreshes are debounced during bursty CLI updates", () => {
+      assert.match(appSource, /const FILE_TREE_REFRESH_DEBOUNCE_MS = 150;/);
+      assert.match(appSource, /function scheduleFileTreeRefresh\(/);
+      assert.match(appSource, /scheduleFileTreeRefresh\(\);/);
+    }),
+    test("terminal output is capped to avoid long-session DOM bloat", () => {
+      assert.match(appSource, /const MAX_TERMINAL_ENTRIES = 250;/);
+      assert.match(appSource, /while \(container\.children\.length > MAX_TERMINAL_ENTRIES\)/);
+    }),
+  ];
+
+  await runTests("performance", tests);
+}
+
+const invokedDirectly = process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url);
+
+if (invokedDirectly) {
+  runPerformanceTests().catch((error) => {
+    console.error(error.stack || error.message);
+    process.exitCode = 1;
+  });
+}