create-interview-cockpit 0.6.0 → 0.8.0

package/template/cockpit.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.4.0"
+  "version": "0.6.0"
 }

package/template/server/src/google-drive.ts

@@ -360,6 +360,7 @@ export async function syncWorkspace(
                         cs.origin === "sandbox" ||
                         cs.origin === "react" ||
                         cs.origin === "nextjs" ||
+                        cs.origin === "module-federation" ||
                         cs.origin === "infra")
                     ) {
                       try {
@@ -770,6 +771,7 @@ export async function exportWorkspace(
                   cf.origin === "sandbox" ||
                   cf.origin === "react" ||
                   cf.origin === "nextjs" ||
+                  cf.origin === "module-federation" ||
                   cf.origin === "infra"
                 ) {
                   try {

package/template/server/src/index.ts

@@ -690,7 +690,14 @@ app.post("/api/questions/:questionId/save-code-snippet", async (req, res) => {
     code: string;
     language: string;
     label: string;
-    origin: "user" | "ai" | "sandbox" | "infra" | "react" | "nextjs";
+    origin:
+      | "user"
+      | "ai"
+      | "sandbox"
+      | "infra"
+      | "react"
+      | "nextjs"
+      | "module-federation";
   };
   if (typeof code !== "string" || !code.trim()) {
     return res.status(400).json({ error: "code is required" });
@@ -701,11 +708,12 @@ app.post("/api/questions/:questionId/save-code-snippet", async (req, res) => {
     origin !== "sandbox" &&
     origin !== "infra" &&
     origin !== "react" &&
-    origin !== "nextjs"
+    origin !== "nextjs" &&
+    origin !== "module-federation"
   ) {
     return res.status(400).json({
       error:
-        "origin must be 'user', 'ai', 'sandbox', 'infra', 'react', or 'nextjs'",
+        "origin must be 'user', 'ai', 'sandbox', 'infra', 'react', 'nextjs', or 'module-federation'",
     });
   }
   try {
@@ -994,7 +1002,7 @@ app.post("/api/frontend-lab/ask", async (req, res) => {
   const { messages, workspace, labType, questionId } = req.body as {
     messages?: Array<{ role: "user" | "assistant"; content: string }>;
     workspace?: Record<string, string>;
-    labType?: "react" | "nextjs";
+    labType?: "react" | "nextjs" | "module-federation";
     questionId?: string;
   };
 
@@ -1008,7 +1016,11 @@ app.post("/api/frontend-lab/ask", async (req, res) => {
   const aiSettings = await storage.getAiSettings();
 
   const typeLabel =
-    labType === "nextjs" ? "Next.js App Router" : "React + TypeScript";
+    labType === "nextjs"
+      ? "Next.js App Router"
+      : labType === "module-federation"
+        ? "Webpack Module Federation"
+        : "React + TypeScript";
 
   let workspaceBlock = "";
   if (workspace && typeof workspace === "object") {
@@ -2280,6 +2292,346 @@ const NEXT_MODULES_DIR = path.join(NEXT_NPX_DIR, "node_modules");
 // walking up the directory tree — no symlinks needed, no Turbopack restrictions.
 const NEXT_SANDBOX_BASE = path.join(NEXT_NPX_DIR, ".sandboxes");
 
+interface ModuleFederationSandboxEntry {
+  child: ReturnType<typeof spawn>;
+  dir: string;
+  hostUrl: string;
+  appUrls: Record<string, string>;
+  workspaceFiles: Set<string>;
+  logs: string[];
+  ready: boolean;
+}
+
+const moduleFederationSandboxes = new Map<
+  string,
+  ModuleFederationSandboxEntry
+>();
+const MODULE_FEDERATION_SANDBOX_BASE = path.join(
+  os.tmpdir(),
+  "interview-cockpit-module-federation",
+);
+
+function appendSandboxLog(logs: string[], text: string): string {
+  const clean = text.replace(/\x1b\[[0-9;]*[A-Za-z]/g, "");
+  logs.push(clean);
+  if (logs.length > 400) {
+    logs.splice(0, logs.length - 400);
+  }
+  return clean;
+}
+
+function npmCommand(): string {
+  return process.platform === "win32" ? "npm.cmd" : "npm";
+}
+
+async function writeModuleFederationSandboxFiles(
+  dir: string,
+  files: Record<string, string>,
+) {
+  for (const [filePath, content] of Object.entries(files)) {
+    const fullPath = path.join(dir, filePath);
+    await fs.mkdir(path.dirname(fullPath), { recursive: true });
+    await fs.writeFile(fullPath, content, "utf8");
+  }
+}
+
+async function runLoggedCommand(
+  command: string,
+  args: string[],
+  options: { cwd: string; env?: NodeJS.ProcessEnv },
+  logs: string[],
+): Promise<void> {
+  await new Promise<void>((resolve, reject) => {
+    const child = spawn(command, args, {
+      cwd: options.cwd,
+      env: options.env,
+    });
+
+    child.stdout.on("data", (chunk: Buffer) => {
+      appendSandboxLog(logs, chunk.toString());
+    });
+    child.stderr.on("data", (chunk: Buffer) => {
+      appendSandboxLog(logs, chunk.toString());
+    });
+    child.on("error", reject);
+    child.on("exit", (code) => {
+      if (code === 0) {
+        resolve();
+        return;
+      }
+      reject(
+        new Error(
+          logs.join("").trim() ||
+            `${command} ${args.join(" ")} exited with code ${String(code)}`,
+        ),
+      );
+    });
+  });
+}
+
+type ModuleFederationCommandOutputKind = "stdout" | "stderr" | "info";
+
+const MODULE_FEDERATION_SHELL_META_TOKENS = new Set([
+  "&&",
+  "||",
+  ";",
+  "|",
+  ">",
+  ">>",
+  "<",
+  "2>",
+  "&",
+]);
+
+function splitShellLikeCommand(command: string): string[] {
+  const tokens: string[] = [];
+  let current = "";
+  let quote: '"' | "'" | null = null;
+  let escape = false;
+
+  for (const char of command.trim()) {
+    if (escape) {
+      current += char;
+      escape = false;
+      continue;
+    }
+
+    if (char === "\\") {
+      escape = true;
+      continue;
+    }
+
+    if (quote) {
+      if (char === quote) {
+        quote = null;
+      } else {
+        current += char;
+      }
+      continue;
+    }
+
+    if (char === '"' || char === "'") {
+      quote = char;
+      continue;
+    }
+
+    if (/\s/.test(char)) {
+      if (current) {
+        tokens.push(current);
+        current = "";
+      }
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (escape) current += "\\";
+  if (quote) throw new Error("Command has an unclosed quote");
+  if (current) tokens.push(current);
+  return tokens;
+}
+
+function normalizeSandboxRelativePath(filePath: string, label: string): string {
+  const normalized = filePath.replace(/\\/g, "/").trim();
+  if (!normalized || normalized === ".") {
+    return "";
+  }
+  if (path.isAbsolute(normalized)) {
+    throw new Error(`${label} must be relative to the webpack lab root`);
+  }
+
+  const parts = normalized.split("/").filter(Boolean);
+  if (parts.some((part) => part === "." || part === "..")) {
+    throw new Error(`${label} must stay inside the webpack lab root`);
+  }
+
+  return parts.join("/");
+}
+
+function isPathInside(root: string, target: string): boolean {
+  const relative = path.relative(root, target);
+  return (
+    relative === "" ||
+    (!relative.startsWith("..") && !path.isAbsolute(relative))
+  );
+}
+
+function parseModuleFederationCommand(command: string): {
+  args: string[];
+  displayCommand: string;
+} {
+  const tokens = splitShellLikeCommand(command);
+  if (tokens.length < 3 || tokens[0] !== "npm" || tokens[1] !== "run") {
+    throw new Error(
+      "Only npm run <script> commands are allowed in the webpack lab console",
+    );
+  }
+
+  if (tokens.some((token) => MODULE_FEDERATION_SHELL_META_TOKENS.has(token))) {
+    throw new Error(
+      "Shell operators are not supported here. Run one npm command at a time.",
+    );
+  }
+
+  if (
+    tokens.some(
+      (token) => token === "--prefix" || token.startsWith("--prefix="),
+    )
+  ) {
+    throw new Error(
+      "Use the folder selector instead of npm --prefix in the webpack lab console.",
+    );
+  }
+
+  return {
+    args: tokens.slice(1),
+    displayCommand: `$ ${tokens.join(" ")}`,
+  };
+}
+
+async function resolveModuleFederationCommandCwd(
+  sandboxDir: string,
+  cwd: string | undefined,
+): Promise<{ normalized: string; fullPath: string }> {
+  const normalized = normalizeSandboxRelativePath(
+    cwd ?? "",
+    "Command directory",
+  );
+  const fullPath = path.resolve(sandboxDir, normalized || ".");
+
+  if (!isPathInside(path.resolve(sandboxDir), fullPath)) {
+    throw new Error(
+      "Command directory must stay inside the webpack lab sandbox",
+    );
+  }
+
+  const stats = await fs.stat(fullPath).catch(() => null);
+  if (!stats?.isDirectory()) {
+    throw new Error(`Command directory not found: ${normalized || "."}`);
+  }
+
+  return { normalized, fullPath };
+}
+
+function getModuleFederationCommandEnv(
+  sandbox: ModuleFederationSandboxEntry,
+): NodeJS.ProcessEnv {
+  const hostPort = new URL(sandbox.appUrls.host).port;
+  const profilePort = new URL(sandbox.appUrls.profile).port;
+  const checkoutPort = new URL(sandbox.appUrls.checkout).port;
+
+  return {
+    ...process.env,
+    HOST_PORT: hostPort,
+    PROFILE_PORT: profilePort,
+    CHECKOUT_PORT: checkoutPort,
+    npm_config_update_notifier: "false",
+  };
+}
+
+async function runStreamedCommand(
+  command: string,
+  args: string[],
+  options: { cwd: string; env?: NodeJS.ProcessEnv },
+  onChunk: (payload: {
+    kind: ModuleFederationCommandOutputKind;
+    text: string;
+  }) => void,
+): Promise<void> {
+  await new Promise<void>((resolve, reject) => {
+    const stdout: string[] = [];
+    const stderr: string[] = [];
+    const child = spawn(command, args, {
+      cwd: options.cwd,
+      env: options.env,
+    });
+
+    child.stdout.on("data", (chunk: Buffer) => {
+      const text = chunk.toString().replace(/\x1b\[[0-9;]*[A-Za-z]/g, "");
+      stdout.push(text);
+      onChunk({ kind: "stdout", text });
+    });
+    child.stderr.on("data", (chunk: Buffer) => {
+      const text = chunk.toString().replace(/\x1b\[[0-9;]*[A-Za-z]/g, "");
+      stderr.push(text);
+      onChunk({ kind: "stderr", text });
+    });
+    child.on("error", (error) => {
+      reject(new Error(`${command} launch failed: ${error.message}`));
+    });
+    child.on("close", (code) => {
+      if (code === 0) {
+        resolve();
+        return;
+      }
+
+      reject(
+        new Error(
+          stderr.join("").trim() ||
+            stdout.join("").trim() ||
+            `${command} ${args.join(" ")} exited with code ${String(code)}`,
+        ),
+      );
+    });
+  });
+}
+
+async function walkAllFiles(dir: string, prefix = ""): Promise<string[]> {
+  const entries = await fs
+    .readdir(dir, { withFileTypes: true })
+    .catch(() => []);
+  const files: string[] = [];
+
+  for (const entry of entries) {
+    const rel = prefix ? `${prefix}/${entry.name}` : entry.name;
+    if (entry.isDirectory()) {
+      files.push(...(await walkAllFiles(path.join(dir, entry.name), rel)));
+    } else {
+      files.push(rel);
+    }
+  }
+
+  return files;
+}
+
+async function listModuleFederationGeneratedFiles(
+  dir: string,
+): Promise<string[]> {
+  const files: string[] = [];
+
+  const visit = async (currentDir: string, prefix = "") => {
+    const entries = await fs
+      .readdir(currentDir, { withFileTypes: true })
+      .catch(() => []);
+
+    for (const entry of entries) {
+      if (entry.name === "node_modules") continue;
+      const rel = prefix ? `${prefix}/${entry.name}` : entry.name;
+      const fullPath = path.join(currentDir, entry.name);
+
+      if (entry.isDirectory()) {
+        if (entry.name === "dist") {
+          files.push(...(await walkAllFiles(fullPath, rel)));
+        } else {
+          await visit(fullPath, rel);
+        }
+      }
+    }
+  };
+
+  await visit(dir);
+  return files.sort((a, b) => a.localeCompare(b));
+}
+
+async function getDistinctPorts(count: number): Promise<number[]> {
+  const ports = new Set<number>();
+  while (ports.size < count) {
+    ports.add(await getFreePort());
+  }
+  return Array.from(ports);
+}
+
 /** Write all user files and necessary config into a sandbox directory. */
 async function writeNextSandboxFiles(
   dir: string,
@@ -2480,6 +2832,291 @@ app.delete("/api/nextjs/:id", async (req, res) => {
   res.json({ ok: true });
 });
 
+app.post("/api/module-federation/start", async (req, res) => {
+  const { files } = req.body as { files?: Record<string, string> };
+  if (!files || typeof files !== "object") {
+    return res.status(400).json({ error: "files is required" });
+  }
+  if (typeof files["package.json"] !== "string") {
+    return res.status(400).json({ error: "package.json is required" });
+  }
+
+  const id = randomUUID();
+  const dir = path.join(MODULE_FEDERATION_SANDBOX_BASE, id);
+  const logs: string[] = [];
+
+  try {
+    await fs.mkdir(dir, { recursive: true });
+    await writeModuleFederationSandboxFiles(dir, files);
+
+    await runLoggedCommand(
+      npmCommand(),
+      ["install", "--no-audit", "--no-fund", "--prefer-offline"],
+      {
+        cwd: dir,
+        env: {
+          ...process.env,
+          npm_config_update_notifier: "false",
+        },
+      },
+      logs,
+    );
+
+    const [hostPort, profilePort, checkoutPort] = await getDistinctPorts(3);
+    const appUrls = {
+      host: `http://localhost:${hostPort}`,
+      profile: `http://localhost:${profilePort}`,
+      checkout: `http://localhost:${checkoutPort}`,
+    };
+    const readyPorts = new Set<string>();
+
+    const child = spawn(npmCommand(), ["run", "dev"], {
+      cwd: dir,
+      env: {
+        ...process.env,
+        HOST_PORT: String(hostPort),
+        PROFILE_PORT: String(profilePort),
+        CHECKOUT_PORT: String(checkoutPort),
+        npm_config_update_notifier: "false",
+      },
+    });
+
+    const entry: ModuleFederationSandboxEntry = {
+      child,
+      dir,
+      hostUrl: appUrls.host,
+      appUrls,
+      workspaceFiles: new Set(Object.keys(files)),
+      logs,
+      ready: false,
+    };
+
+    const markReady = (text: string) => {
+      if (text.includes(`localhost:${hostPort}`)) readyPorts.add("host");
+      if (text.includes(`localhost:${profilePort}`)) readyPorts.add("profile");
+      if (text.includes(`localhost:${checkoutPort}`))
+        readyPorts.add("checkout");
+      if (readyPorts.size === 3) {
+        entry.ready = true;
+      }
+    };
+
+    child.stdout.on("data", (chunk: Buffer) => {
+      markReady(appendSandboxLog(logs, chunk.toString()));
+    });
+    child.stderr.on("data", (chunk: Buffer) => {
+      markReady(appendSandboxLog(logs, chunk.toString()));
+    });
+    child.on("exit", () => {
+      moduleFederationSandboxes.delete(id);
+      fs.rm(dir, { recursive: true, force: true }).catch(() => {});
+    });
+
+    moduleFederationSandboxes.set(id, entry);
+
+    const deadline = Date.now() + 90_000;
+    while (!entry.ready && Date.now() < deadline) {
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      if (!moduleFederationSandboxes.has(id)) {
+        return res.status(500).json({
+          error: logs.join("").trim() || "Webpack module federation lab exited",
+        });
+      }
+    }
+
+    if (!entry.ready) {
+      return res.status(504).json({
+        error: "Webpack module federation lab did not start in time",
+        logs,
+      });
+    }
+
+    res.json({
+      id,
+      hostUrl: entry.hostUrl,
+      appUrls: entry.appUrls,
+    });
+  } catch (error: any) {
+    await fs.rm(dir, { recursive: true, force: true }).catch(() => {});
+    res.status(500).json({
+      error:
+        logs.join("").trim() ||
+        error?.message ||
+        "Failed to start webpack module federation lab",
+    });
+  }
+});
+
+app.post("/api/module-federation/:id/update-files", async (req, res) => {
+  const sandbox = moduleFederationSandboxes.get(req.params.id);
+  if (!sandbox) return res.status(404).json({ error: "Sandbox not found" });
+
+  const { files } = req.body as { files?: Record<string, string> };
+  if (!files || typeof files !== "object") {
+    return res.status(400).json({ error: "files is required" });
+  }
+
+  const nextFiles = new Set(Object.keys(files));
+  await Promise.all(
+    Array.from(sandbox.workspaceFiles)
+      .filter((filePath) => !nextFiles.has(filePath))
+      .map((filePath) =>
+        fs
+          .rm(path.join(sandbox.dir, filePath), { force: true })
+          .catch(() => {}),
+      ),
+  );
+  await writeModuleFederationSandboxFiles(sandbox.dir, files);
+  sandbox.workspaceFiles = nextFiles;
+  res.json({ ok: true });
+});
+
+app.get("/api/module-federation/:id/status", (req, res) => {
+  const sandbox = moduleFederationSandboxes.get(req.params.id);
+  if (!sandbox) {
+    return res.json({ running: false });
+  }
+
+  res.setHeader("Cache-Control", "no-store");
+
+  res.json({
+    running: true,
+    ready: sandbox.ready,
+    hostUrl: sandbox.hostUrl,
+    appUrls: sandbox.appUrls,
+    logs: sandbox.logs.slice(-80),
+  });
+});
+
+app.post("/api/module-federation/:id/command-stream", async (req, res) => {
+  const sandbox = moduleFederationSandboxes.get(req.params.id);
+
+  res.setHeader("Content-Type", "text/event-stream");
+  res.setHeader("Cache-Control", "no-cache");
+  res.setHeader("Connection", "keep-alive");
+  res.flushHeaders();
+
+  const send = (payload: unknown) => {
+    res.write(`data: ${JSON.stringify(payload)}\n\n`);
+  };
+
+  if (!sandbox) {
+    send({ type: "error", error: "Sandbox not found" });
+    res.end();
+    return;
+  }
+
+  const { command, cwd } = req.body as { command?: string; cwd?: string };
+
+  if (typeof command !== "string" || !command.trim()) {
+    send({ type: "error", error: "command is required" });
+    res.end();
+    return;
+  }
+
+  try {
+    const parsed = parseModuleFederationCommand(command);
+    const resolvedCwd = await resolveModuleFederationCommandCwd(
+      sandbox.dir,
+      cwd,
+    );
+
+    send({
+      type: "output",
+      kind: "info",
+      text: `cwd: ${resolvedCwd.normalized || "."}\n${parsed.displayCommand}\n`,
+    });
+
+    await runStreamedCommand(
+      npmCommand(),
+      parsed.args,
+      {
+        cwd: resolvedCwd.fullPath,
+        env: getModuleFederationCommandEnv(sandbox),
+      },
+      ({ kind, text }) => {
+        send({ type: "output", kind, text });
+      },
+    );
+
+    send({ type: "complete" });
+  } catch (error: any) {
+    send({
+      type: "error",
+      error: error?.message || "Failed to run webpack lab command",
+    });
+  }
+
+  res.end();
+});
+
+app.get("/api/module-federation/:id/generated-files", async (req, res) => {
+  const sandbox = moduleFederationSandboxes.get(req.params.id);
+  if (!sandbox) {
+    return res.status(404).json({ error: "Sandbox not found" });
+  }
+
+  res.setHeader("Cache-Control", "no-store");
+
+  try {
+    const files = await listModuleFederationGeneratedFiles(sandbox.dir);
+    res.json({ files });
+  } catch (error: any) {
+    res.status(500).json({
+      error: error?.message || "Failed to list webpack lab generated files",
+    });
+  }
+});
+
+app.get("/api/module-federation/:id/generated-file", async (req, res) => {
+  const sandbox = moduleFederationSandboxes.get(req.params.id);
+  if (!sandbox) {
+    return res.status(404).json({ error: "Sandbox not found" });
+  }
+
+  res.setHeader("Cache-Control", "no-store");
+
+  const filePath =
+    typeof req.query.path === "string" ? req.query.path : undefined;
+  if (!filePath) {
+    return res.status(400).json({ error: "path is required" });
+  }
+
+  try {
+    const normalized = normalizeSandboxRelativePath(
+      filePath,
+      "Generated file path",
+    );
+    if (!/(^|\/)dist\//.test(normalized)) {
+      return res.status(400).json({
+        error: "Only generated dist files can be read here",
+      });
+    }
+
+    const fullPath = path.resolve(sandbox.dir, normalized);
+    if (!isPathInside(path.resolve(sandbox.dir), fullPath)) {
+      return res.status(403).json({ error: "Access denied" });
+    }
+
+    const content = await fs.readFile(fullPath, "utf8");
+    res.json({ path: normalized, content });
+  } catch (error: any) {
+    res.status(500).json({
+      error: error?.message || "Failed to read webpack lab generated file",
+    });
+  }
+});
+
+app.delete("/api/module-federation/:id", async (req, res) => {
+  const sandbox = moduleFederationSandboxes.get(req.params.id);
+  if (sandbox) {
+    sandbox.child.kill("SIGTERM");
+    moduleFederationSandboxes.delete(req.params.id);
+    await fs.rm(sandbox.dir, { recursive: true, force: true }).catch(() => {});
+  }
+  res.json({ ok: true });
+});
+
 async function getFreePort(): Promise<number> {
   return new Promise((resolve, reject) => {
     const srv = net.createServer();