create-interview-cockpit 0.7.0 → 0.8.0

package/template/client/src/reactLab.ts

@@ -237,14 +237,14 @@ This lab uses real webpack 5 + webpack-dev-server + Module Federation.
   "name": "webpack-module-federation-lab",
   "private": true,
   "scripts": {
-    "dev": "concurrently -k -n host,profile,checkout -c cyan,magenta,yellow 'npm run dev:host' 'npm run dev:profile' 'npm run dev:checkout'",
-    "dev:host": "webpack serve --config apps/host/webpack.config.js",
-    "dev:profile": "webpack serve --config apps/profile/webpack.config.js",
-    "dev:checkout": "webpack serve --config apps/checkout/webpack.config.js",
-    "build": "npm run build:host && npm run build:profile && npm run build:checkout",
-    "build:host": "webpack --config apps/host/webpack.config.js",
-    "build:profile": "webpack --config apps/profile/webpack.config.js",
-    "build:checkout": "webpack --config apps/checkout/webpack.config.js"
+    "dev": "concurrently -k -n host,profile,checkout -c cyan,magenta,yellow 'npm --prefix apps/host run dev' 'npm --prefix apps/profile run dev' 'npm --prefix apps/checkout run dev'",
+    "dev:host": "npm --prefix apps/host run dev",
+    "dev:profile": "npm --prefix apps/profile run dev",
+    "dev:checkout": "npm --prefix apps/checkout run dev",
+    "build": "npm --prefix apps/host run build && npm --prefix apps/profile run build && npm --prefix apps/checkout run build",
+    "build:host": "npm --prefix apps/host run build",
+    "build:profile": "npm --prefix apps/profile run build",
+    "build:checkout": "npm --prefix apps/checkout run build"
   },
   "dependencies": {
     "react": "^19.0.0",
@@ -272,6 +272,15 @@ This lab uses real webpack 5 + webpack-dev-server + Module Federation.
     <div id="root"></div>
   </body>
 </html>
+`,
+  "apps/host/package.json": `{
+  "name": "@mf-lab/host",
+  "private": true,
+  "scripts": {
+    "dev": "webpack serve --config webpack.config.js",
+    "build": "webpack --config webpack.config.js"
+  }
+}
 `,
   "apps/host/src/index.jsx": `import("./bootstrap");
 `,
@@ -368,6 +377,7 @@ module.exports = {
   mode: "development",
   entry: path.resolve(__dirname, "./src/index.jsx"),
   output: {
+    path: path.resolve(__dirname, "./dist"),
     publicPath: "http://localhost:" + hostPort + "/",
     clean: true,
   },
@@ -427,6 +437,15 @@ module.exports = {
     <div id="root"></div>
   </body>
 </html>
+`,
+  "apps/profile/package.json": `{
+  "name": "@mf-lab/profile",
+  "private": true,
+  "scripts": {
+    "dev": "webpack serve --config webpack.config.js",
+    "build": "webpack --config webpack.config.js"
+  }
+}
 `,
   "apps/profile/src/index.jsx": `import("./bootstrap");
 `,
@@ -486,6 +505,7 @@ module.exports = {
   mode: "development",
   entry: path.resolve(__dirname, "./src/index.jsx"),
   output: {
+    path: path.resolve(__dirname, "./dist"),
     publicPath: "http://localhost:" + profilePort + "/",
     clean: true,
   },
@@ -544,6 +564,15 @@ module.exports = {
     <div id="root"></div>
   </body>
 </html>
+`,
+  "apps/checkout/package.json": `{
+  "name": "@mf-lab/checkout",
+  "private": true,
+  "scripts": {
+    "dev": "webpack serve --config webpack.config.js",
+    "build": "webpack --config webpack.config.js"
+  }
+}
 `,
   "apps/checkout/src/index.jsx": `import("./bootstrap");
 `,
@@ -611,6 +640,7 @@ module.exports = {
   mode: "development",
   entry: path.resolve(__dirname, "./src/index.jsx"),
   output: {
+    path: path.resolve(__dirname, "./dist"),
     publicPath: "http://localhost:" + checkoutPort + "/",
     clean: true,
   },

package/template/client/tsconfig.tsbuildinfo

@@ -1 +1,30 @@
-{"root":["./src/app.tsx","./src/api.ts","./src/main.tsx","./src/store.ts","./src/types.ts","./src/vite-env.d.ts","./src/components/aisettingsmodal.tsx","./src/components/annotationdialog.tsx","./src/components/chatmessage.tsx","./src/components/chatview.tsx","./src/components/codecontextpanel.tsx","./src/components/codelineannotationpopup.tsx","./src/components/coderunnermodal.tsx","./src/components/docrefmodal.tsx","./src/components/fileattachments.tsx","./src/components/filepickermodal.tsx","./src/components/fileviewermodal.tsx","./src/components/linkedconvospicker.tsx","./src/components/markdownrenderer.tsx","./src/components/mermaiddiagram.tsx","./src/components/plotembed.tsx","./src/components/sidebar.tsx","./src/components/textannotator.tsx","./src/components/vizcraftembed.tsx","./src/components/workspaceswitcher.tsx"],"version":"5.9.3"}
+{
+  "root": [
+    "./src/app.tsx",
+    "./src/api.ts",
+    "./src/main.tsx",
+    "./src/store.ts",
+    "./src/types.ts",
+    "./src/vite-env.d.ts",
+    "./src/components/aisettingsmodal.tsx",
+    "./src/components/annotationdialog.tsx",
+    "./src/components/chatmessage.tsx",
+    "./src/components/chatview.tsx",
+    "./src/components/codecontextpanel.tsx",
+    "./src/components/codelineannotationpopup.tsx",
+    "./src/components/coderunnermodal.tsx",
+    "./src/components/docrefmodal.tsx",
+    "./src/components/fileattachments.tsx",
+    "./src/components/filepickermodal.tsx",
+    "./src/components/fileviewermodal.tsx",
+    "./src/components/linkedconvospicker.tsx",
+    "./src/components/markdownrenderer.tsx",
+    "./src/components/mermaiddiagram.tsx",
+    "./src/components/plotembed.tsx",
+    "./src/components/sidebar.tsx",
+    "./src/components/textannotator.tsx",
+    "./src/components/vizcraftembed.tsx",
+    "./src/components/workspaceswitcher.tsx"
+  ],
+  "version": "5.9.3"
+}

package/template/cockpit.json

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

package/template/server/src/index.ts

@@ -2369,6 +2369,261 @@ async function runLoggedCommand(
   });
 }
 
+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) {
@@ -2722,6 +2977,8 @@ app.get("/api/module-federation/:id/status", (req, res) => {
     return res.json({ running: false });
   }
 
+  res.setHeader("Cache-Control", "no-store");
+
   res.json({
     running: true,
     ready: sandbox.ready,
@@ -2731,6 +2988,125 @@ app.get("/api/module-federation/:id/status", (req, res) => {
   });
 });
 
+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) {