create-interview-cockpit 0.12.0 → 0.14.0

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

@@ -19,6 +19,7 @@ import {
   Globe,
   SlidersHorizontal,
   ArrowRightLeft,
+  MoreHorizontal,
 } from "lucide-react";
 
 const ROOT_PARENT_VALUE = "__root__";
@@ -75,6 +76,9 @@ export default function Sidebar() {
   const [collapsedQuestions, setCollapsedQuestions] = useState<Set<string>>(
     new Set(),
   );
+  const [openMenuQuestionId, setOpenMenuQuestionId] = useState<string | null>(
+    null,
+  );
   const [openTopicPrompts, setOpenTopicPrompts] = useState<Set<string>>(
     new Set(),
   );
@@ -320,6 +324,7 @@ export default function Sidebar() {
   ) => {
     // 12px base left padding + 16px per depth level
     const paddingLeft = 12 + depth * 16;
+    const isMenuOpen = openMenuQuestionId === q.id;
     return (
       <div
         key={q.id}
@@ -371,7 +376,8 @@ export default function Sidebar() {
           />
         ) : (
           <span
-            className="text-xs text-slate-400 truncate flex-1"
+            className="text-xs text-slate-400 truncate flex-1 min-w-0"
+            title={q.title}
             onDoubleClick={(e) => {
               e.stopPropagation();
               setEditingQuestionId(q.id);
@@ -381,63 +387,99 @@ export default function Sidebar() {
             {q.title}
           </span>
         )}
-        <span className="text-[10px] text-slate-700 shrink-0">
-          {q.messages.length > 0 ? `${q.messages.length}` : ""}
-        </span>
-        {editingQuestionId !== q.id && (
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              setAddingChildTo(q.id);
-              setNewChildTitle("");
-            }}
-            className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
-            title="Add child question"
-          >
-            <CornerDownRight className="w-2.5 h-2.5" />
-          </button>
-        )}
-        {editingQuestionId !== q.id && (
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              setEditingQuestionId(q.id);
-              setEditingQuestionTitle(q.title);
-            }}
-            className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
-            title="Rename"
-          >
-            <Pencil className="w-2.5 h-2.5" />
-          </button>
-        )}
+
+        {/* Right side: count fades on hover, replaced by "..." menu */}
         {editingQuestionId !== q.id && (
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              setMovingQuestionId((prev) => (prev === q.id ? null : q.id));
-              setMoveTargetParentId(q.parentQuestionId ?? ROOT_PARENT_VALUE);
-            }}
-            className={`p-0.5 rounded opacity-0 group-hover:opacity-100 transition-all ${
-              movingQuestionId === q.id
-                ? "opacity-100 text-cyan-400"
-                : "text-slate-600 hover:text-cyan-400"
-            }`}
-            title="Move to a different parent"
+          <div
+            className="relative shrink-0 flex items-center"
+            onClick={(e) => e.stopPropagation()}
           >
-            <ArrowRightLeft className="w-2.5 h-2.5" />
-          </button>
+            {/* Count — hidden while hovering or when menu is open */}
+            <span
+              className={`text-[10px] text-slate-700 ${
+                isMenuOpen ? "hidden" : "group-hover:hidden"
+              }`}
+            >
+              {q.messages.length > 0 ? `${q.messages.length}` : ""}
+            </span>
+
+            {/* "..." button — shown on hover or while menu is open */}
+            <button
+              onClick={() => setOpenMenuQuestionId(isMenuOpen ? null : q.id)}
+              className={`p-0.5 rounded transition-all ${
+                isMenuOpen
+                  ? "text-cyan-400"
+                  : "opacity-0 group-hover:opacity-100 text-slate-500 hover:text-slate-300"
+              }`}
+              title="More options"
+            >
+              <MoreHorizontal className="w-3.5 h-3.5" />
+            </button>
+
+            {/* Dropdown */}
+            {isMenuOpen && (
+              <>
+                {/* Backdrop — closes menu when clicking outside */}
+                <div
+                  className="fixed inset-0 z-40"
+                  onClick={() => setOpenMenuQuestionId(null)}
+                />
+                <div className="absolute right-0 top-full mt-0.5 z-50 bg-slate-800 border border-slate-700 rounded-md shadow-xl min-w-[140px] py-0.5">
+                  <button
+                    onClick={() => {
+                      setOpenMenuQuestionId(null);
+                      setEditingQuestionId(q.id);
+                      setEditingQuestionTitle(q.title);
+                    }}
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
+                  >
+                    <Pencil className="w-3 h-3" /> Rename
+                  </button>
+                  <button
+                    onClick={() => {
+                      setOpenMenuQuestionId(null);
+                      setAddingChildTo(q.id);
+                      setNewChildTitle("");
+                    }}
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
+                  >
+                    <CornerDownRight className="w-3 h-3" /> Add child
+                  </button>
+                  <button
+                    onClick={() => {
+                      setOpenMenuQuestionId(null);
+                      setMovingQuestionId((prev) =>
+                        prev === q.id ? null : q.id,
+                      );
+                      setMoveTargetParentId(
+                        q.parentQuestionId ?? ROOT_PARENT_VALUE,
+                      );
+                    }}
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
+                  >
+                    <ArrowRightLeft className="w-3 h-3" /> Move
+                  </button>
+                  <div className="border-t border-slate-700 my-0.5" />
+                  <button
+                    onClick={() => {
+                      setOpenMenuQuestionId(null);
+                      if (
+                        window.confirm(
+                          `Delete "${q.title}"? This cannot be undone.`,
+                        )
+                      ) {
+                        removeQuestion(q.id, topicId);
+                      }
+                    }}
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-slate-700 hover:text-red-300 transition-colors"
+                  >
+                    <Trash2 className="w-3 h-3" /> Delete
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
         )}
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            if (window.confirm(`Delete "${q.title}"? This cannot be undone.`)) {
-              removeQuestion(q.id, topicId);
-            }
-          }}
-          className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-red-400 transition-all"
-        >
-          <Trash2 className="w-2.5 h-2.5" />
-        </button>
       </div>
     );
   };

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;