create-interview-cockpit 0.13.0 → 0.15.0

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/client/src/store.ts

@@ -220,6 +220,7 @@ interface Store {
       | "user"
       | "ai"
       | "sandbox"
+      | "browser-security"
       | "infra"
       | "react"
       | "nextjs"
@@ -283,6 +284,8 @@ interface Store {
     clientCode: string;
     clientLang: string;
     fileId?: string;
+    label?: string;
+    origin?: "sandbox" | "browser-security";
     /** If set, the client panel opens in React or Next.js preview mode instead of script mode */
     clientType?: "script" | "react" | "nextjs" | "module-federation";
     reactFiles?: Record<string, string> | null;
@@ -298,6 +301,8 @@ interface Store {
     clientLang: string,
     fileId?: string,
     opts?: {
+      label?: string;
+      origin?: "sandbox" | "browser-security";
       clientType?: "script" | "react" | "nextjs" | "module-federation";
       reactFiles?: Record<string, string>;
       reactActiveFile?: string;
@@ -320,6 +325,11 @@ interface Store {
   openDeploymentLab: () => void;
   closeDeploymentLab: () => void;
 
+  // ── Browser Security Lab ─────────────────────────────────────
+  showBrowserSecurityLab: boolean;
+  openBrowserSecurityLab: () => void;
+  closeBrowserSecurityLab: () => void;
+
   // ── Infra Lab ────────────────────────────────────────────────
   showInfraLab: boolean;
   runnerInitialInfra: InfraLabWorkspace | null;
@@ -373,6 +383,7 @@ export const useStore = create<Store>((set, get) => ({
   runnerInitialSandbox: null,
   runnerInitialFileId: null,
   showDeploymentLab: false,
+  showBrowserSecurityLab: false,
   showInfraLab: false,
   runnerInitialInfra: null,
   runnerInitialInfraFileId: null,
@@ -971,6 +982,8 @@ export const useStore = create<Store>((set, get) => ({
         clientCode,
         clientLang,
         fileId,
+        label: opts?.label,
+        origin: opts?.origin,
         clientType: opts?.clientType,
         reactFiles: opts?.reactFiles,
         reactActiveFile: opts?.reactActiveFile,
@@ -1058,9 +1071,10 @@ export const useStore = create<Store>((set, get) => ({
     }));
   },
   closeCodeRunner: () => set({ showCodeRunner: false }),
-  showDeploymentLab: false,
   openDeploymentLab: () => set({ showDeploymentLab: true }),
   closeDeploymentLab: () => set({ showDeploymentLab: false }),
+  openBrowserSecurityLab: () => set({ showBrowserSecurityLab: true }),
+  closeBrowserSecurityLab: () => set({ showBrowserSecurityLab: false }),
   closeInfraLab: () => set({ showInfraLab: false }),
 
   fetchAiSettings: async () => {

package/template/client/src/types.ts

@@ -3,6 +3,7 @@ export type ContextFileOrigin =
   | "ai"
   | "upload"
   | "sandbox"
+  | "browser-security"
   | "infra"
   | "react"
   | "nextjs"
@@ -17,6 +18,7 @@ export interface ContextFile {
   /** Distinguishes how this file was added. 'upload' = user-uploaded doc,
    *  'user' = code saved from Code Runner, 'ai' = AI-generated code block,
    *  'sandbox' = paired server+client sandbox saved as JSON,
+   *  'browser-security' = paired server+client security lab saved as JSON,
    *  'infra' = Terraform-style infra lab workspace saved as JSON. */
   origin?: ContextFileOrigin;
   /** Language hint for code snippets (e.g. 'typescript', 'javascript'). */

package/template/client/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/api.ts","./src/infralab.ts","./src/main.tsx","./src/reactlab.ts","./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/infralabmodal.tsx","./src/components/linkedconvospicker.tsx","./src/components/markdownrenderer.tsx","./src/components/mermaiddiagram.tsx","./src/components/notesmodal.tsx","./src/components/plotembed.tsx","./src/components/sidebar.tsx","./src/components/textannotator.tsx","./src/components/vizcraftembed.tsx","./src/components/workspaceswitcher.tsx"],"errors":true,"version":"5.9.3"}
+{"root":["./src/app.tsx","./src/api.ts","./src/browsersecuritytemplates.ts","./src/infralab.ts","./src/main.tsx","./src/reactlab.ts","./src/store.ts","./src/types.ts","./src/vite-env.d.ts","./src/components/aisettingsmodal.tsx","./src/components/annotationdialog.tsx","./src/components/browsersecuritylabmodal.tsx","./src/components/chatmessage.tsx","./src/components/chatview.tsx","./src/components/codecontextpanel.tsx","./src/components/codelineannotationpopup.tsx","./src/components/coderunnermodal.tsx","./src/components/deploymentlabmodal.tsx","./src/components/docrefmodal.tsx","./src/components/fileattachments.tsx","./src/components/filepickermodal.tsx","./src/components/fileviewermodal.tsx","./src/components/infralabmodal.tsx","./src/components/labspanel.tsx","./src/components/linkedconvospicker.tsx","./src/components/markdownrenderer.tsx","./src/components/mermaiddiagram.tsx","./src/components/notesmodal.tsx","./src/components/plotembed.tsx","./src/components/sidebar.tsx","./src/components/textannotator.tsx","./src/components/vizcraftembed.tsx","./src/components/workspaceswitcher.tsx"],"errors":true,"version":"5.9.3"}

package/template/cockpit.json

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

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

@@ -358,6 +358,7 @@ export async function syncWorkspace(
                       (cs.origin === "user" ||
                         cs.origin === "ai" ||
                         cs.origin === "sandbox" ||
+                        cs.origin === "browser-security" ||
                         cs.origin === "react" ||
                         cs.origin === "nextjs" ||
                         cs.origin === "module-federation" ||
@@ -769,6 +770,7 @@ export async function exportWorkspace(
                   cf.origin === "user" ||
                   cf.origin === "ai" ||
                   cf.origin === "sandbox" ||
+                  cf.origin === "browser-security" ||
                   cf.origin === "react" ||
                   cf.origin === "nextjs" ||
                   cf.origin === "module-federation" ||