create-interview-cockpit 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-interview-cockpit",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Scaffold a personal AI-powered interview prep cockpit",
   "type": "module",
   "bin": {

package/template/client/src/components/LabsPanel.tsx

@@ -1,7 +1,10 @@
 import { useState } from "react";
 import { useStore } from "../store";
 import { parseInfraLabWorkspace } from "../infraLab";
-import { parseFrontendLabWorkspace } from "../reactLab";
+import {
+  parseFrontendLabWorkspace,
+  ISOLATED_MODULE_FEDERATION_LAB,
+} from "../reactLab";
 import type { ContextFile } from "../types";
 import {
   Plus,
@@ -379,6 +382,7 @@ export default function LabsPanel() {
     emptyText,
     onNewLab,
     newLabTitle,
+    newLabMenu,
     onOpen,
     openTitle,
     accentClass,
@@ -391,11 +395,17 @@ export default function LabsPanel() {
     emptyText: string;
     onNewLab?: () => void;
     newLabTitle?: string;
+    newLabMenu?: Array<{
+      label: string;
+      description: string;
+      onClick: () => void;
+    }>;
     onOpen: (cf: ContextFile) => void;
     openTitle: string;
     accentClass: string;
     bgClass: string;
   }) {
+    const [menuOpen, setMenuOpen] = useState(false);
     const items = byOrigin(origin);
     if (!currentQuestion) return null;
 
@@ -408,7 +418,45 @@ export default function LabsPanel() {
               {title} ({items.length})
             </span>
           </div>
-          {onNewLab && (
+          {newLabMenu ? (
+            <div className="relative">
+              <button
+                onClick={() => setMenuOpen((o) => !o)}
+                className="p-0.5 rounded text-slate-600 hover:text-cyan-400 hover:bg-slate-700 transition-colors"
+                title="New lab"
+              >
+                <Plus className="w-3.5 h-3.5" />
+              </button>
+              {menuOpen && (
+                <>
+                  {/* backdrop to close on outside click */}
+                  <div
+                    className="fixed inset-0 z-40"
+                    onClick={() => setMenuOpen(false)}
+                  />
+                  <div className="absolute right-0 top-full mt-1 z-50 bg-slate-800 border border-slate-600 rounded-lg shadow-xl w-52 overflow-hidden">
+                    {newLabMenu.map((item) => (
+                      <button
+                        key={item.label}
+                        onClick={() => {
+                          item.onClick();
+                          setMenuOpen(false);
+                        }}
+                        className="w-full text-left px-3 py-2 hover:bg-slate-700 transition-colors group"
+                      >
+                        <div className="text-[11px] font-medium text-slate-200 group-hover:text-cyan-300">
+                          {item.label}
+                        </div>
+                        <div className="text-[10px] text-slate-500 mt-0.5 leading-snug">
+                          {item.description}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+          ) : onNewLab ? (
             <button
               onClick={onNewLab}
               className="p-0.5 rounded text-slate-600 hover:text-cyan-400 hover:bg-slate-700 transition-colors"
@@ -416,7 +464,7 @@ export default function LabsPanel() {
             >
               <Plus className="w-3.5 h-3.5" />
             </button>
-          )}
+          ) : null}
         </div>
         <div className="space-y-0.5 max-h-40 overflow-y-auto">
           {items.map((cf) => (
@@ -528,8 +576,21 @@ export default function LabsPanel() {
             iconColor="text-emerald-400/70"
             origin="module-federation"
             emptyText="Save a webpack module federation lab to reopen it here"
-            onNewLab={() => openModuleFederationLab()}
-            newLabTitle="Open Webpack Module Federation Lab"
+            newLabMenu={[
+              {
+                label: "Shared React Tree",
+                description:
+                  "Shell & remote share one React runtime — classic federation",
+                onClick: () => openModuleFederationLab(),
+              },
+              {
+                label: "Isolated Mount / Unmount",
+                description:
+                  "Remote owns its own React root via mount(el) / unmount(el)",
+                onClick: () =>
+                  openModuleFederationLab(ISOLATED_MODULE_FEDERATION_LAB),
+              },
+            ]}
             onOpen={openMFFile}
             openTitle="Open in Webpack Module Federation Lab"
             accentClass="text-emerald-200"

package/template/client/src/reactLab.ts

@@ -1143,6 +1143,414 @@ export const DEFAULT_MODULE_FEDERATION_LAB: FrontendLabWorkspace = {
   files: MODULE_FEDERATION_DEFAULT_FILES,
 };
 
+// ─── Isolated Mount/Unmount MFE workspace ───────────────────────────────────
+// Each remote manages its own React root — no shared React tree with the host.
+// The remote exposes mount(el, props) / unmount(el) instead of a React component.
+const MODULE_FEDERATION_ISOLATED_FILES: Record<string, string> = {
+  "README.md": `# Isolated Mount/Unmount Module Federation Lab
+
+## Pattern overview
+
+In the classic "shared React tree" pattern the host imports a remote React component
+and renders it inside its own tree - both share one React runtime.
+
+In this **isolated** pattern:
+- The remote exposes \`mount(el, props)\` and \`unmount(el)\` functions
+- The host calls those functions with a DOM element
+- Each remote creates its own \`ReactDOM.createRoot\` — it is NOT in the host's tree
+- The remote can use a different React major version from the host
+
+## Structure
+
+- \`apps/host\`  — the shell app (React 18)
+- \`apps/mfe-auth\` — the micro-frontend (could be React 18 or 19)
+
+## Key files
+
+- \`apps/mfe-auth/src/mount.jsx\` — exposes \`mount\` / \`unmount\`
+- \`apps/mfe-auth/webpack.config.js\` — exposes \`./mount\` (not a React component)
+- \`apps/host/src/MfeContainer.jsx\` — host side: DOM ref + useEffect calling mount/unmount
+- \`apps/host/src/App.jsx\` — renders \`<MfeContainer />\` like any normal component
+
+## What to experiment with
+
+1. Try passing different versions of React to host vs mfe-auth and see they don't conflict
+2. Add a second MFE (\`apps/mfe-dashboard\`) following the same mount/unmount contract
+3. Pass props through \`mount(el, { user, theme })\` and handle updates in the remote
+4. Observe that React context from the host does NOT flow into the remote
+`,
+  "package.json": `{
+  "name": "mf-isolated-lab",
+  "private": true,
+  "workspaces": [
+    "apps/host",
+    "apps/mfe-auth"
+  ],
+  "scripts": {
+    "dev": "concurrently -k -n host,mfe-auth -c cyan,magenta 'npm run dev --workspace=@mf-isolated/host' 'npm run dev --workspace=@mf-isolated/mfe-auth'",
+    "build": "npm run build --workspace=@mf-isolated/host && npm run build --workspace=@mf-isolated/mfe-auth"
+  },
+  "devDependencies": {
+    "concurrently": "^9.2.1"
+  }
+}
+`,
+  "apps/host/package.json": `{
+  "name": "@mf-isolated/host",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "webpack serve --config webpack.config.js",
+    "build": "webpack --config webpack.config.js"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.0",
+    "esbuild-loader": "^4.4.3",
+    "html-webpack-plugin": "^5.6.7",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2",
+    "webpack-dev-server": "^5.2.3"
+  }
+}
+`,
+  "apps/host/webpack.config.js": `const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { ModuleFederationPlugin } = require("webpack").container;
+const deps = require("./package.json").dependencies;
+
+const HOST_PORT = parseInt(process.env.HOST_PORT || "3001");
+const MFE_AUTH_PORT = parseInt(process.env.MFE_AUTH_PORT || "3002");
+
+module.exports = {
+  mode: "development",
+  entry: "./src/index.js",
+  output: {
+    publicPath: "auto",
+  },
+  resolve: { extensions: [".js", ".jsx"] },
+  module: {
+    rules: [
+      {
+        test: /\\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "esbuild-loader",
+          options: { loader: "jsx", jsx: "automatic", target: "es2020" },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "host",
+      remotes: {
+        // The remote exposes mount/unmount — NOT a React component
+        mfeAuth: \`mfeAuth@http://localhost:\${MFE_AUTH_PORT}/remoteEntry.js\`,
+      },
+      // Host does NOT share React with the remote.
+      // Each app brings its own copy.
+      shared: {
+        react: { requiredVersion: deps.react },
+        "react-dom": { requiredVersion: deps["react-dom"] },
+      },
+    }),
+    new HtmlWebpackPlugin({ template: "./public/index.html" }),
+  ],
+  devServer: {
+    port: HOST_PORT,
+    headers: { "Access-Control-Allow-Origin": "*" },
+  },
+};
+`,
+  "apps/host/public/index.html": `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Host (Isolated MFE)</title>
+    <style>
+      body { font-family: system-ui, sans-serif; background: #0f172a; color: #e2e8f0; margin: 0; }
+      h1 { padding: 1rem 1.5rem 0; font-size: 1.1rem; color: #94a3b8; }
+      .mfe-slot {
+        margin: 1rem 1.5rem;
+        border: 1px solid #334155;
+        border-radius: 8px;
+        padding: 1rem;
+        min-height: 80px;
+        background: #1e293b;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`,
+  "apps/host/src/index.js": `// Async boundary: required for Module Federation dynamic imports
+import("./bootstrap");
+`,
+  "apps/host/src/bootstrap.jsx": `import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+createRoot(document.getElementById("root")).render(<App />);
+`,
+  "apps/host/src/App.jsx": `import React from "react";
+import MfeContainer from "./MfeContainer";
+
+export default function App() {
+  return (
+    <div>
+      <h1>Host App — Isolated MFE demo</h1>
+      <p style={{ padding: "0 1.5rem", color: "#64748b", fontSize: "0.8rem" }}>
+        The auth widget below is rendered by mfe-auth into its own React root.
+        The host and the remote do NOT share a React tree.
+      </p>
+
+      {/* Host renders a plain DOM container.
+          MfeContainer calls mount/unmount on that element. */}
+      <MfeContainer user={{ name: "Alice", role: "admin" }} />
+    </div>
+  );
+}
+`,
+  "apps/host/src/MfeContainer.jsx": `import React, { useRef, useEffect } from "react";
+
+// Lazy-load the remote's mount/unmount contract — not a React component.
+const mfeAuthMountPromise = import("mfeAuth/mount");
+
+export default function MfeContainer({ user }) {
+  const elRef = useRef(null);
+  const mountedRef = useRef(null); // holds { unmount } returned by remote
+
+  useEffect(() => {
+    let cancelled = false;
+    let cleanup = null;
+
+    mfeAuthMountPromise.then(({ mount }) => {
+      if (cancelled || !elRef.current) return;
+      // mount() creates a new ReactDOM.createRoot inside mfe-auth.
+      // It returns an object with an unmount() method.
+      cleanup = mount(elRef.current, { user });
+      mountedRef.current = cleanup;
+    });
+
+    return () => {
+      cancelled = true;
+      // On cleanup, call the remote's own unmount so it can tear down its root.
+      cleanup?.unmount();
+    };
+  }, []); // mount once — treat like a portal
+
+  // If props change, tell the remote to update.
+  // The remote decides how to handle prop updates.
+  useEffect(() => {
+    mountedRef.current?.update?.({ user });
+  }, [user]);
+
+  return (
+    <div
+      ref={elRef}
+      className="mfe-slot"
+      style={{
+        margin: "1rem 1.5rem",
+        border: "1px solid #334155",
+        borderRadius: "8px",
+        padding: "1rem",
+        minHeight: "80px",
+        background: "#1e293b",
+      }}
+    />
+  );
+}
+`,
+  "apps/mfe-auth/package.json": `{
+  "name": "@mf-isolated/mfe-auth",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "webpack serve --config webpack.config.js",
+    "build": "webpack --config webpack.config.js"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.0",
+    "esbuild-loader": "^4.4.3",
+    "html-webpack-plugin": "^5.6.7",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2",
+    "webpack-dev-server": "^5.2.3"
+  }
+}
+`,
+  "apps/mfe-auth/webpack.config.js": `const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { ModuleFederationPlugin } = require("webpack").container;
+const deps = require("./package.json").dependencies;
+
+const MFE_AUTH_PORT = parseInt(process.env.MFE_AUTH_PORT || "3002");
+
+module.exports = {
+  mode: "development",
+  entry: "./src/index.js",
+  output: {
+    publicPath: "auto",
+  },
+  resolve: { extensions: [".js", ".jsx"] },
+  module: {
+    rules: [
+      {
+        test: /\\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "esbuild-loader",
+          options: { loader: "jsx", jsx: "automatic", target: "es2020" },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "mfeAuth",
+      filename: "remoteEntry.js",
+      exposes: {
+        // Key difference: we expose the MOUNT MODULE, not a React component.
+        // The host never imports a JSX element from us directly.
+        "./mount": "./src/mount.jsx",
+      },
+      // This remote brings its OWN React copy.
+      // No singleton sharing with the host here.
+      shared: {
+        react: { requiredVersion: deps.react },
+        "react-dom": { requiredVersion: deps["react-dom"] },
+      },
+    }),
+    new HtmlWebpackPlugin({ template: "./public/index.html" }),
+  ],
+  devServer: {
+    port: MFE_AUTH_PORT,
+    headers: { "Access-Control-Allow-Origin": "*" },
+  },
+};
+`,
+  "apps/mfe-auth/public/index.html": `<!doctype html>
+<html lang="en">
+  <head><meta charset="UTF-8" /><title>MFE Auth (standalone)</title></head>
+  <body><div id="root"></div></body>
+</html>
+`,
+  "apps/mfe-auth/src/index.js": `import("./bootstrap");
+`,
+  "apps/mfe-auth/src/bootstrap.jsx": `// Standalone entry — only used when running mfe-auth on its own for development.
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+createRoot(document.getElementById("root")).render(
+  <App user={{ name: "Dev User", role: "developer" }} />
+);
+`,
+  "apps/mfe-auth/src/App.jsx": `import React from "react";
+
+// Standalone view — used for local development of the MFE in isolation.
+export default function App({ user = {} }) {
+  return (
+    <div style={{ padding: "1rem", fontFamily: "system-ui, sans-serif", background: "#0f172a", color: "#e2e8f0", minHeight: "100vh" }}>
+      <h2 style={{ color: "#a78bfa", fontSize: "0.9rem", margin: "0 0 0.5rem" }}>
+        mfe-auth — standalone dev view
+      </h2>
+      <AuthWidget user={user} />
+    </div>
+  );
+}
+
+// The actual React component that this MFE renders.
+export function AuthWidget({ user = {} }) {
+  return (
+    <div style={{ padding: "0.75rem 1rem", background: "#1e293b", borderRadius: "6px", border: "1px solid #334155" }}>
+      <p style={{ margin: 0, fontSize: "0.8rem", color: "#94a3b8" }}>Auth MFE — isolated React root</p>
+      <p style={{ margin: "0.5rem 0 0", fontSize: "0.75rem", color: "#64748b" }}>
+        Logged in as: <strong style={{ color: "#e2e8f0" }}>{user.name ?? "Guest"}</strong>
+        {user.role && <span style={{ marginLeft: "0.5rem", color: "#6366f1" }}>({user.role})</span>}
+      </p>
+      <p style={{ margin: "0.5rem 0 0", fontSize: "0.7rem", color: "#334155", fontStyle: "italic" }}>
+        This component lives in its own React root — not in the host tree.
+        React context from the host does not reach here.
+      </p>
+    </div>
+  );
+}
+`,
+  "apps/mfe-auth/src/mount.jsx": `// ─────────────────────────────────────────────────────────────
+// mount.jsx — the public contract exposed via Module Federation
+//
+// The host imports THIS file, not a React component.
+// It calls mount(domElement, props) to render, unmount(domElement) to tear down.
+//
+// This is the core of the isolated MFE pattern:
+//   1. We create our OWN React root (not the host's)
+//   2. We own our own lifecycle
+//   3. The host never sees our React instance
+// ─────────────────────────────────────────────────────────────
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { AuthWidget } from "./App";
+
+// Keep track of roots by element so we can update or unmount them.
+const roots = new WeakMap();
+
+/**
+ * Mount the MFE into the given DOM element.
+ *
+ * @param {HTMLElement} el   - the host-provided DOM node
+ * @param {object}      props - initial props from the host
+ * @returns {{ unmount: () => void, update: (props: object) => void }}
+ */
+export function mount(el, props = {}) {
+  const root = createRoot(el);
+  roots.set(el, root);
+
+  root.render(<AuthWidget {...props} />);
+
+  return {
+    /** Call this to pass updated props from the host without remounting. */
+    update(newProps) {
+      root.render(<AuthWidget {...newProps} />);
+    },
+    /** Tear down the React root when the host removes this MFE. */
+    unmount() {
+      root.unmount();
+      roots.delete(el);
+    },
+  };
+}
+
+/**
+ * Convenience function: unmount using only the element reference.
+ * Useful if the host didn't store the return value of mount().
+ */
+export function unmount(el) {
+  const root = roots.get(el);
+  if (root) {
+    root.unmount();
+    roots.delete(el);
+  }
+}
+`,
+};
+
+export const ISOLATED_MODULE_FEDERATION_LAB: FrontendLabWorkspace = {
+  version: 1,
+  label: "Webpack MF — Isolated Mount/Unmount",
+  type: "module-federation",
+  activeFile: "apps/mfe-auth/src/mount.jsx",
+  files: MODULE_FEDERATION_ISOLATED_FILES,
+};
+
 export function defaultForType(type: FrontendLabType): FrontendLabWorkspace {
   if (type === "nextjs") return DEFAULT_NEXTJS_LAB;
   if (type === "module-federation") return DEFAULT_MODULE_FEDERATION_LAB;

package/template/cockpit.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.12.0"
+  "version": "0.13.0"
 }

package/template/server/src/index.ts

@@ -2589,17 +2589,19 @@ 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 {
+  const env: NodeJS.ProcessEnv = {
     ...process.env,
     HOST_PORT: hostPort,
-    PROFILE_PORT: profilePort,
-    CHECKOUT_PORT: checkoutPort,
     MF_SANDBOX_ID: sandbox.id,
     npm_config_update_notifier: "false",
   };
+  if (sandbox.appUrls.profile)
+    env.PROFILE_PORT = new URL(sandbox.appUrls.profile).port;
+  if (sandbox.appUrls.checkout)
+    env.CHECKOUT_PORT = new URL(sandbox.appUrls.checkout).port;
+  if (sandbox.appUrls.mfeAuth)
+    env.MFE_AUTH_PORT = new URL(sandbox.appUrls.mfeAuth).port;
+  return env;
 }
 
 async function runStreamedCommand(
@@ -2934,24 +2936,42 @@ app.post("/api/module-federation/start", async (req, res) => {
       logs,
     );
 
-    const [hostPort, profilePort, checkoutPort] = await getDistinctPorts(3);
-    const appUrls = {
+    // Detect isolated 2-app pattern (host + mfe-auth, no profile/checkout).
+    const isIsolated =
+      typeof files["apps/mfe-auth/package.json"] === "string" &&
+      typeof files["apps/checkout/package.json"] !== "string";
+
+    const ports = await getDistinctPorts(isIsolated ? 2 : 3);
+    const [hostPort] = ports;
+
+    const appUrls: Record<string, string> = {
       host: `http://localhost:${hostPort}`,
-      profile: `http://localhost:${profilePort}`,
-      checkout: `http://localhost:${checkoutPort}`,
     };
+    const spawnEnv: NodeJS.ProcessEnv = {
+      ...process.env,
+      HOST_PORT: String(hostPort),
+      MF_SANDBOX_ID: id,
+      npm_config_update_notifier: "false",
+    };
+
+    if (isIsolated) {
+      const [, mfeAuthPort] = ports;
+      appUrls.mfeAuth = `http://localhost:${mfeAuthPort}`;
+      spawnEnv.MFE_AUTH_PORT = String(mfeAuthPort);
+    } else {
+      const [, profilePort, checkoutPort] = ports;
+      appUrls.profile = `http://localhost:${profilePort}`;
+      appUrls.checkout = `http://localhost:${checkoutPort}`;
+      spawnEnv.PROFILE_PORT = String(profilePort);
+      spawnEnv.CHECKOUT_PORT = String(checkoutPort);
+    }
+
     const readyPorts = new Set<string>();
+    const requiredPorts = isIsolated ? 2 : 3;
 
     const child = spawn(npmCommand(), ["run", "dev"], {
       cwd: dir,
-      env: {
-        ...process.env,
-        HOST_PORT: String(hostPort),
-        PROFILE_PORT: String(profilePort),
-        CHECKOUT_PORT: String(checkoutPort),
-        MF_SANDBOX_ID: id,
-        npm_config_update_notifier: "false",
-      },
+      env: spawnEnv,
     });
 
     const entry: ModuleFederationSandboxEntry = {
@@ -2966,11 +2986,10 @@ app.post("/api/module-federation/start", async (req, res) => {
     };
 
     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) {
+      for (const [key, url] of Object.entries(appUrls)) {
+        if (text.includes(new URL(url).host)) readyPorts.add(key);
+      }
+      if (readyPorts.size >= requiredPorts) {
         entry.ready = true;
       }
     };