create-interview-cockpit 0.6.0 → 0.7.0

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

@@ -43,10 +43,15 @@ import {
   generatePreviewHTML,
   defaultForType,
   resolveNextjsEntry,
+  type FrontendLabType,
 } from "../reactLab";
 import {
+  fetchModuleFederationStatus,
+  startModuleFederationSandbox,
   startNextjsSandbox,
+  stopModuleFederationSandbox,
   updateNextjsFiles,
+  updateModuleFederationFiles,
   stopNextjsSandbox,
 } from "../api";
 import ReactMarkdown from "react-markdown";
@@ -67,6 +72,7 @@ interface OutputLine {
 
 const LANG_OPTIONS = ["typescript", "javascript"] as const;
 type Lang = (typeof LANG_OPTIONS)[number];
+type FrontendClientType = "script" | FrontendLabType;
 
 // ── Sandbox default snippets ─────────────────────────────────────────
 const DEFAULT_SERVER_CODE = `import express from 'express';
@@ -202,6 +208,49 @@ function SyntaxEditor({
   );
 }
 
+interface FileTreeNode {
+  name: string;
+  path: string;
+  children: FileTreeNode[];
+  files: string[];
+}
+
+function buildFileTree(paths: string[]): FileTreeNode {
+  const root: FileTreeNode = {
+    name: "",
+    path: "",
+    children: [],
+    files: [],
+  };
+
+  for (const filePath of paths) {
+    const parts = filePath.split("/");
+    let node = root;
+
+    for (let index = 0; index < parts.length - 1; index += 1) {
+      const name = parts[index];
+      const path = parts.slice(0, index + 1).join("/");
+      let child = node.children.find((entry) => entry.path === path);
+
+      if (!child) {
+        child = {
+          name,
+          path,
+          children: [],
+          files: [],
+        };
+        node.children.push(child);
+      }
+
+      node = child;
+    }
+
+    node.files.push(filePath);
+  }
+
+  return root;
+}
+
 export default function CodeRunnerModal() {
   const {
     closeCodeRunner,
@@ -246,9 +295,7 @@ export default function CodeRunnerModal() {
   const [clientRunning, setClientRunning] = useState(false);
 
   // ── React/Next.js client state ──────────────────────────────
-  const [clientType, setClientType] = useState<"script" | "react" | "nextjs">(
-    "script",
-  );
+  const [clientType, setClientType] = useState<FrontendClientType>("script");
   const [reactFiles, setReactFiles] = useState<Record<string, string>>({});
   const [reactActiveFile, setReactActiveFile] = useState<string>("");
   const [reactClientTab, setReactClientTab] = useState<"edit" | "preview">(
@@ -267,6 +314,12 @@ export default function CodeRunnerModal() {
   const [nxStarting, setNxStarting] = useState(false);
   const [nxError, setNxError] = useState<string | null>(null);
   const nxIframeRef = useRef<HTMLIFrameElement>(null);
+  const [mfSandboxId, setMfSandboxId] = useState<string | null>(null);
+  const [mfHostUrl, setMfHostUrl] = useState<string | null>(null);
+  const [mfAppUrls, setMfAppUrls] = useState<Record<string, string>>({});
+  const [mfStarting, setMfStarting] = useState(false);
+  const [mfError, setMfError] = useState<string | null>(null);
+  const [mfPreviewApp, setMfPreviewApp] = useState("host");
   // Simulated URL bar state for Next.js mode
   const [reactPreviewPath, setReactPreviewPath] = useState("/");
   const [reactNavInput, setReactNavInput] = useState("/");
@@ -367,7 +420,9 @@ export default function CodeRunnerModal() {
           ? "react"
           : clientType === "nextjs"
             ? "nextjs"
-            : "sandbox";
+            : clientType === "module-federation"
+              ? "module-federation"
+              : "sandbox";
       const payload = JSON.stringify(
         clientType === "script"
           ? { serverCode, serverLang, clientCode, clientLang }
@@ -474,10 +529,9 @@ export default function CodeRunnerModal() {
     setActiveSandboxId(runnerInitialSandbox.fileId ?? null);
     // Restore client type and React/Next.js files
     const ct =
-      (runnerInitialSandbox.clientType as "script" | "react" | "nextjs") ??
-      "script";
+      (runnerInitialSandbox.clientType as FrontendClientType) ?? "script";
     setClientType(ct);
-    if (ct === "react" || ct === "nextjs") {
+    if (ct !== "script") {
       if (
         runnerInitialSandbox.reactFiles &&
         Object.keys(runnerInitialSandbox.reactFiles).length > 0
@@ -495,6 +549,11 @@ export default function CodeRunnerModal() {
       }
       setReactPreviewSrc(null);
       setReactClientTab("edit");
+      if (ct === "module-federation") {
+        setServerCollapsed(true);
+        setClientCollapsed(false);
+        setMfPreviewApp("host");
+      }
     }
   }, [runnerInitialSandbox]);
 
@@ -979,6 +1038,66 @@ export default function CodeRunnerModal() {
     }
   }, [nxStarting, reactFiles]);
 
+  const startModuleFederationServer = useCallback(async () => {
+    if (mfStarting) return;
+    setMfStarting(true);
+    setMfError(null);
+    setSbxBottomTab("output");
+    setSandboxOutput([
+      {
+        kind: "info",
+        text: "Installing dependencies and starting webpack apps…",
+        source: "server",
+      },
+    ]);
+    try {
+      const info = await startModuleFederationSandbox(reactFiles);
+      setMfSandboxId(info.id);
+      setMfHostUrl(info.hostUrl);
+      setMfAppUrls(info.appUrls);
+      setMfPreviewApp(
+        info.appUrls.host ? "host" : (Object.keys(info.appUrls)[0] ?? "host"),
+      );
+      setReactClientTab("preview");
+      setServerCollapsed(true);
+      setClientCollapsed(false);
+      setSandboxOutput((prev) => [
+        ...prev,
+        {
+          kind: "info",
+          text: `✓ Webpack host running at ${info.hostUrl}`,
+          source: "server",
+        },
+      ]);
+    } catch (err: any) {
+      const message = err?.message ?? String(err);
+      setMfError(message);
+      setSandboxOutput((prev) => [
+        ...prev,
+        { kind: "stderr", text: message, source: "server" },
+      ]);
+    } finally {
+      setMfStarting(false);
+    }
+  }, [mfStarting, reactFiles]);
+
+  const stopModuleFederationServer = useCallback(async () => {
+    if (!mfSandboxId) return;
+    await stopModuleFederationSandbox(mfSandboxId).catch(() => {});
+    setMfSandboxId(null);
+    setMfHostUrl(null);
+    setMfAppUrls({});
+    setMfError(null);
+    setSandboxOutput((prev) => [
+      ...prev,
+      {
+        kind: "info",
+        text: "Webpack module federation lab stopped.",
+        source: "server",
+      },
+    ]);
+  }, [mfSandboxId]);
+
   /** Push updated files to the running Next.js server (HMR picks them up). */
   const pushNextjsFiles = useCallback(
     async (files: Record<string, string>) => {
@@ -992,6 +1111,18 @@ export default function CodeRunnerModal() {
     [nxSandboxId],
   );
 
+  const pushModuleFederationFiles = useCallback(
+    async (files: Record<string, string>) => {
+      if (!mfSandboxId) return;
+      try {
+        await updateModuleFederationFiles(mfSandboxId, files);
+      } catch (err: any) {
+        setMfError(err?.message ?? String(err));
+      }
+    },
+    [mfSandboxId],
+  );
+
   // Auto-push file changes to the running Next.js server
   const nxFilesRef = useRef(reactFiles);
   useEffect(() => {
@@ -1000,6 +1131,55 @@ export default function CodeRunnerModal() {
     void pushNextjsFiles(reactFiles);
   }, [reactFiles, nxSandboxId, pushNextjsFiles]);
 
+  const mfFilesRef = useRef(reactFiles);
+  useEffect(() => {
+    if (!mfSandboxId || reactFiles === mfFilesRef.current) return;
+    mfFilesRef.current = reactFiles;
+    void pushModuleFederationFiles(reactFiles);
+  }, [reactFiles, mfSandboxId, pushModuleFederationFiles]);
+
+  useEffect(() => {
+    if (!mfSandboxId) return;
+    const interval = setInterval(async () => {
+      try {
+        const status = await fetchModuleFederationStatus(mfSandboxId);
+        if (!status.running) {
+          setMfSandboxId(null);
+          setMfHostUrl(null);
+          setMfAppUrls({});
+          setMfError(null);
+          return;
+        }
+        if (status.hostUrl) setMfHostUrl(status.hostUrl);
+        if (status.appUrls) {
+          setMfAppUrls(status.appUrls);
+          setMfPreviewApp((prev) =>
+            status.appUrls?.[prev]
+              ? prev
+              : (Object.keys(status.appUrls ?? {})[0] ?? "host"),
+          );
+        }
+        if (status.logs) {
+          setSandboxOutput(
+            status.logs.flatMap((chunk) =>
+              chunk
+                .split("\n")
+                .filter(Boolean)
+                .map((text) => ({
+                  kind: "stdout" as const,
+                  text,
+                  source: "server" as const,
+                })),
+            ),
+          );
+        }
+      } catch {
+        /* ignore transient network errors */
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [mfSandboxId]);
+
   // Clean up Next.js server when the modal is closed or mode changes away from nextjs
   const prevClientTypeRef = useRef(clientType);
   useEffect(() => {
@@ -1010,21 +1190,32 @@ export default function CodeRunnerModal() {
       setNxSandboxId(null);
       setNxSandboxUrl(null);
     }
-  }, [clientType, nxSandboxId]);
+    if (
+      prev === "module-federation" &&
+      clientType !== "module-federation" &&
+      mfSandboxId
+    ) {
+      void stopModuleFederationSandbox(mfSandboxId);
+      setMfSandboxId(null);
+      setMfHostUrl(null);
+      setMfAppUrls({});
+    }
+  }, [clientType, nxSandboxId, mfSandboxId]);
 
   // Clean up on unmount
   useEffect(() => {
     return () => {
       if (nxSandboxId) void stopNextjsSandbox(nxSandboxId);
+      if (mfSandboxId) void stopModuleFederationSandbox(mfSandboxId);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [nxSandboxId]);
+  }, [nxSandboxId, mfSandboxId]);
 
   const handleClientTypeChange = useCallback(
-    (ct: "script" | "react" | "nextjs") => {
+    (ct: FrontendClientType) => {
       if (ct === clientType) return;
       setClientType(ct);
-      if (ct === "react" || ct === "nextjs") {
+      if (ct !== "script") {
         const defs = defaultForType(ct);
         setReactFiles(defs.files);
         setReactActiveFile(defs.activeFile);
@@ -1036,6 +1227,12 @@ export default function CodeRunnerModal() {
           setReactNavHistory(["/"]);
           setReactNavIndex(0);
         }
+        if (ct === "module-federation") {
+          setServerCollapsed(true);
+          setClientCollapsed(false);
+          setMfPreviewApp("host");
+          setMfError(null);
+        }
       }
     },
     [clientType],
@@ -1061,12 +1258,19 @@ export default function CodeRunnerModal() {
       ...prev,
       { id: aId, role: "assistant", content: "" },
     ]);
-    const isReactMode = clientType === "react" || clientType === "nextjs";
-    const workspaceFiles = isReactMode
+    const isFrontendMode =
+      clientType === "react" ||
+      clientType === "nextjs" ||
+      clientType === "module-federation";
+    const workspaceFiles = isFrontendMode
       ? reactFiles
       : { "client.js": clientCode, "server.ts": serverCode };
-    const labType: "react" | "nextjs" =
-      clientType === "nextjs" ? "nextjs" : "react";
+    const labType: FrontendLabType =
+      clientType === "nextjs"
+        ? "nextjs"
+        : clientType === "module-federation"
+          ? "module-federation"
+          : "react";
     try {
       const history = [...sbxChatMessages, userMsg].map((m) => ({
         role: m.role,
@@ -1944,7 +2148,14 @@ export default function CodeRunnerModal() {
                   </span>
                   {/* Client type selector: JS / React / Next */}
                   <div className="flex items-center rounded overflow-hidden border border-slate-700 text-[9px] ml-1 shrink-0">
-                    {(["script", "react", "nextjs"] as const).map((ct) => (
+                    {(
+                      [
+                        "script",
+                        "react",
+                        "nextjs",
+                        "module-federation",
+                      ] as const
+                    ).map((ct) => (
                       <button
                         key={ct}
                         type="button"
@@ -1959,7 +2170,9 @@ export default function CodeRunnerModal() {
                           ? "JS"
                           : ct === "react"
                             ? "React"
-                            : "Next"}
+                            : ct === "nextjs"
+                              ? "Next"
+                              : "Webpack"}
                       </button>
                     ))}
                   </div>
@@ -2023,9 +2236,11 @@ export default function CodeRunnerModal() {
                     </>
                   )}
                   {/* React/Next mode: optional URL + Preview button + edit/preview toggle for Next */}
-                  {(clientType === "react" || clientType === "nextjs") && (
+                  {(clientType === "react" ||
+                    clientType === "nextjs" ||
+                    clientType === "module-federation") && (
                     <>
-                      {sandboxUrl && (
+                      {clientType !== "module-federation" && sandboxUrl && (
                         <span
                           className="text-[9px] font-mono text-slate-600 truncate max-w-[80px]"
                           title={sandboxUrl}
@@ -2037,7 +2252,7 @@ export default function CodeRunnerModal() {
                       {clientType === "react" && (
                         <button
                           type="button"
-                          onClick={refreshPreview}
+                          onClick={() => refreshPreview()}
                           className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-cyan-600/20 hover:bg-cyan-600/40 text-cyan-400 transition-colors shrink-0"
                           title="Render preview"
                         >
@@ -2093,6 +2308,73 @@ export default function CodeRunnerModal() {
                           )}
                         </>
                       )}
+                      {clientType === "module-federation" && (
+                        <>
+                          {mfSandboxId && mfHostUrl && (
+                            <span
+                              className="text-[9px] font-mono text-slate-600 truncate max-w-[110px]"
+                              title={mfHostUrl}
+                            >
+                              {mfHostUrl.replace(/^https?:\/\//, "")}
+                            </span>
+                          )}
+                          {!mfSandboxId ? (
+                            <button
+                              type="button"
+                              onClick={() => void startModuleFederationServer()}
+                              disabled={mfStarting}
+                              className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-cyan-600/20 hover:bg-cyan-600/40 text-cyan-400 disabled:opacity-50 transition-colors shrink-0"
+                              title="Start real webpack module federation dev servers"
+                            >
+                              {mfStarting ? (
+                                <Loader2 className="w-3 h-3 animate-spin" />
+                              ) : (
+                                <Play className="w-3 h-3" />
+                              )}
+                              {mfStarting ? "Starting…" : "Run Webpack"}
+                            </button>
+                          ) : (
+                            <>
+                              <div className="flex items-center rounded overflow-hidden border border-slate-700/50 text-[9px] shrink-0">
+                                <button
+                                  type="button"
+                                  onClick={() => setReactClientTab("edit")}
+                                  className={`flex items-center gap-0.5 px-1.5 py-0.5 transition-colors ${
+                                    reactClientTab === "edit"
+                                      ? "bg-slate-700 text-slate-200"
+                                      : "text-slate-500 hover:text-slate-400"
+                                  }`}
+                                  title="Edit code"
+                                >
+                                  <Code2 className="w-2.5 h-2.5" />
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={() => setReactClientTab("preview")}
+                                  className={`flex items-center gap-0.5 px-1.5 py-0.5 transition-colors ${
+                                    reactClientTab === "preview"
+                                      ? "bg-slate-700 text-slate-200"
+                                      : "text-slate-500 hover:text-slate-400"
+                                  }`}
+                                  title="Live preview"
+                                >
+                                  <Eye className="w-2.5 h-2.5" />
+                                </button>
+                              </div>
+                              <button
+                                type="button"
+                                onClick={() =>
+                                  void stopModuleFederationServer()
+                                }
+                                className="p-0.5 rounded text-slate-600 hover:text-red-400 transition-colors shrink-0"
+                                title="Stop webpack lab"
+                              >
+                                <StopCircle className="w-3 h-3" />
+                              </button>
+                            </>
+                          )}
+                        </>
+                      )}
                     </>
                   )}
                 </div>
@@ -2215,10 +2497,11 @@ export default function CodeRunnerModal() {
 
                 {/* Client body */}
                 <div
-                  className={`flex-1 min-h-0 ${clientType === "nextjs" ? "flex flex-row" : "relative"}`}
+                  className={`flex-1 min-h-0 ${clientType === "nextjs" || clientType === "module-federation" ? "flex flex-row" : "relative"}`}
                 >
                   {/* ── Next.js VS Code-style file tree sidebar ── */}
-                  {clientType === "nextjs" && (
+                  {(clientType === "nextjs" ||
+                    clientType === "module-federation") && (
                     <div className="w-36 shrink-0 flex flex-col border-r border-slate-700 bg-slate-900/60 overflow-y-auto">
                       {/* Sidebar header */}
                       <div className="flex items-center justify-between px-2 py-1.5 border-b border-slate-700/60">
@@ -2256,7 +2539,11 @@ export default function CodeRunnerModal() {
                                 setReactNewFileName("");
                               }
                             }}
-                            placeholder="app/new.tsx"
+                            placeholder={
+                              clientType === "module-federation"
+                                ? "apps/orders/src/App.jsx"
+                                : "app/new.tsx"
+                            }
                             className="w-full bg-slate-800 border border-cyan-600/50 rounded px-1 py-0.5 text-[9px] font-mono text-slate-200 placeholder-slate-600 outline-none focus:border-cyan-500"
                           />
                         ) : (
@@ -2264,7 +2551,11 @@ export default function CodeRunnerModal() {
                             type="button"
                             onClick={() => setReactAddingFile(true)}
                             className="p-0.5 rounded text-slate-600 hover:text-cyan-400 transition-colors"
-                            title="New file (use paths like app/dashboard/page.tsx)"
+                            title={
+                              clientType === "module-federation"
+                                ? "New file (use paths like apps/orders/src/App.jsx)"
+                                : "New file (use paths like app/dashboard/page.tsx)"
+                            }
                           >
                             <FilePlus className="w-3 h-3" />
                           </button>
@@ -2273,25 +2564,7 @@ export default function CodeRunnerModal() {
                       {/* Tree nodes */}
                       <div className="flex-1 py-1">
                         {(() => {
-                          // Build a folder → file[] map, plus root-level files
-                          const allFiles = Object.keys(reactFiles).sort(
-                            (a, b) => {
-                              const ad = a.split("/").length;
-                              const bd = b.split("/").length;
-                              return ad !== bd ? ad - bd : a.localeCompare(b);
-                            },
-                          );
-                          // Collect unique top-level folders (first path segment for nested files)
-                          const folders = Array.from(
-                            new Set(
-                              allFiles
-                                .filter((f) => f.includes("/"))
-                                .map((f) => f.split("/")[0]),
-                            ),
-                          ).sort();
-                          const rootFiles = allFiles.filter(
-                            (f) => !f.includes("/"),
-                          );
+                          const tree = buildFileTree(Object.keys(reactFiles));
 
                           const fileIcon = (name: string) => {
                             if (name.endsWith(".tsx") || name.endsWith(".jsx"))
@@ -2359,40 +2632,46 @@ export default function CodeRunnerModal() {
                             </div>
                           );
 
-                          const renderFolder = (folder: string) => {
-                            const isOpen = !collapsedFolders.has(folder);
-                            const children = allFiles.filter((f) => {
-                              const parts = f.split("/");
-                              return parts[0] === folder && parts.length >= 2;
-                            });
-                            // Build sub-folder groups within this folder
-                            const subFolders = Array.from(
-                              new Set(
-                                children
-                                  .filter((f) => f.split("/").length > 2)
-                                  .map((f) =>
-                                    f.split("/").slice(0, 2).join("/"),
-                                  ),
-                              ),
-                            ).sort();
-                            const directFiles = children.filter(
-                              (f) => f.split("/").length === 2,
-                            );
+                          const renderNode = (
+                            node: FileTreeNode,
+                            indent = 0,
+                          ): React.ReactNode => {
+                            if (!node.path) {
+                              return (
+                                <>
+                                  {node.children
+                                    .sort((a, b) =>
+                                      a.name.localeCompare(b.name),
+                                    )
+                                    .map((child) => renderNode(child, 0))}
+                                  {node.files
+                                    .sort((a, b) => a.localeCompare(b))
+                                    .map((path) => renderFile(path, 0))}
+                                </>
+                              );
+                            }
+
+                            const isOpen = !collapsedFolders.has(node.path);
 
                             return (
-                              <div key={folder}>
-                                {/* Folder row */}
+                              <div key={node.path}>
                                 <button
                                   type="button"
                                   onClick={() =>
                                     setCollapsedFolders((prev) => {
                                       const next = new Set(prev);
-                                      if (next.has(folder)) next.delete(folder);
-                                      else next.add(folder);
+                                      if (next.has(node.path)) {
+                                        next.delete(node.path);
+                                      } else {
+                                        next.add(node.path);
+                                      }
                                       return next;
                                     })
                                   }
-                                  className="w-full flex items-center gap-0.5 px-2 py-0.5 text-left text-[10px] font-mono text-slate-300 hover:bg-slate-800 transition-colors select-none"
+                                  style={{
+                                    paddingLeft: `${8 + indent * 10}px`,
+                                  }}
+                                  className="w-full flex items-center gap-0.5 pr-2 py-0.5 text-left text-[10px] font-mono text-slate-300 hover:bg-slate-800 transition-colors select-none"
                                 >
                                   {isOpen ? (
                                     <ChevronDown className="w-2.5 h-2.5 shrink-0 text-slate-500" />
@@ -2402,68 +2681,29 @@ export default function CodeRunnerModal() {
                                   <span className="text-yellow-300/80 mr-0.5">
                                     📁
                                   </span>
-                                  <span className="truncate">{folder}/</span>
+                                  <span className="truncate">{node.name}/</span>
                                 </button>
-                                {/* Children */}
                                 {isOpen && (
                                   <div>
-                                    {subFolders.map((sf) => {
-                                      const sfIsOpen =
-                                        !collapsedFolders.has(sf);
-                                      const sfChildren = allFiles.filter(
-                                        (f) =>
-                                          f.startsWith(sf + "/") &&
-                                          f.split("/").length ===
-                                            sf.split("/").length + 1,
-                                      );
-                                      const sfKey = sf.split("/").pop() ?? sf;
-                                      return (
-                                        <div key={sf}>
-                                          <button
-                                            type="button"
-                                            onClick={() =>
-                                              setCollapsedFolders((prev) => {
-                                                const next = new Set(prev);
-                                                if (next.has(sf))
-                                                  next.delete(sf);
-                                                else next.add(sf);
-                                                return next;
-                                              })
-                                            }
-                                            className="w-full flex items-center gap-0.5 pl-[18px] pr-2 py-0.5 text-left text-[10px] font-mono text-slate-300 hover:bg-slate-800 transition-colors select-none"
-                                          >
-                                            {sfIsOpen ? (
-                                              <ChevronDown className="w-2.5 h-2.5 shrink-0 text-slate-500" />
-                                            ) : (
-                                              <ChevronRight className="w-2.5 h-2.5 shrink-0 text-slate-500" />
-                                            )}
-                                            <span className="text-yellow-300/80 mr-0.5">
-                                              📁
-                                            </span>
-                                            <span className="truncate">
-                                              {sfKey}/
-                                            </span>
-                                          </button>
-                                          {sfIsOpen &&
-                                            sfChildren.map((f) =>
-                                              renderFile(f, 3),
-                                            )}
-                                        </div>
-                                      );
-                                    })}
-                                    {directFiles.map((f) => renderFile(f, 1))}
+                                    {node.children
+                                      .sort((a, b) =>
+                                        a.name.localeCompare(b.name),
+                                      )
+                                      .map((child) =>
+                                        renderNode(child, indent + 1),
+                                      )}
+                                    {node.files
+                                      .sort((a, b) => a.localeCompare(b))
+                                      .map((path) =>
+                                        renderFile(path, indent + 1),
+                                      )}
                                   </div>
                                 )}
                               </div>
                             );
                           };
 
-                          return (
-                            <>
-                              {folders.map(renderFolder)}
-                              {rootFiles.map((f) => renderFile(f, 0))}
-                            </>
-                          );
+                          return renderNode(tree);
                         })()}
                       </div>
                     </div>
@@ -2471,7 +2711,7 @@ export default function CodeRunnerModal() {
 
                   {/* ── Editor / Preview area ── */}
                   <div
-                    className={`${clientType === "nextjs" ? "flex-1 min-w-0 relative" : "absolute inset-0"}`}
+                    className={`${clientType === "nextjs" || clientType === "module-federation" ? "flex-1 min-w-0 relative" : "absolute inset-0"}`}
                   >
                     {clientType === "script" ? (
                       <SyntaxEditor
@@ -2508,11 +2748,9 @@ export default function CodeRunnerModal() {
                         placeholder={`// ${reactActiveFile}\n`}
                       />
                     ) : (
-                      // Preview area — URL bar for Next.js, plain iframe for React
                       <div className="w-full h-full flex flex-col">
                         {clientType === "nextjs" && (
                           <div className="flex items-center gap-1 px-2 py-1 bg-slate-800 border-b border-slate-700 shrink-0">
-                            {/* Back */}
                             <button
                               type="button"
                               disabled={reactNavIndex <= 0}
@@ -2535,7 +2773,6 @@ export default function CodeRunnerModal() {
                             >
                               <ChevronLeft className="w-3.5 h-3.5" />
                             </button>
-                            {/* Forward */}
                             <button
                               type="button"
                               disabled={
@@ -2560,7 +2797,6 @@ export default function CodeRunnerModal() {
                             >
                               <ChevronRight className="w-3.5 h-3.5" />
                             </button>
-                            {/* Refresh */}
                             <button
                               type="button"
                               onClick={() => {
@@ -2582,7 +2818,6 @@ export default function CodeRunnerModal() {
                                 <path d="M13.65 2.35A8 8 0 1 0 15 8h-2a6 6 0 1 1-1.1-3.48L10 6h5V1l-1.35 1.35z" />
                               </svg>
                             </button>
-                            {/* URL bar */}
                             <form
                               className="flex-1 flex items-center gap-1 bg-slate-900 border border-slate-600 rounded px-2 py-0.5 focus-within:border-blue-500/60 transition-colors"
                               onSubmit={(e) => {
@@ -2621,7 +2856,6 @@ export default function CodeRunnerModal() {
                                 spellCheck={false}
                               />
                             </form>
-                            {/* Status indicator */}
                             {nxSandboxUrl ? (
                               <span className="text-[9px] font-mono text-green-400 shrink-0">
                                 ● live
@@ -2648,49 +2882,103 @@ export default function CodeRunnerModal() {
                             )}
                           </div>
                         )}
-                        {/* Error banner */}
-                        {nxError && (
+                        {clientType === "module-federation" && (
+                          <div className="flex items-center gap-1 px-2 py-1 bg-slate-800 border-b border-slate-700 shrink-0 overflow-x-auto">
+                            {Object.entries(mfAppUrls).map(([name, url]) => (
+                              <button
+                                key={name}
+                                type="button"
+                                onClick={() => setMfPreviewApp(name)}
+                                className={`px-2 py-0.5 rounded text-[10px] font-mono transition-colors shrink-0 ${
+                                  mfPreviewApp === name
+                                    ? "bg-slate-700 text-slate-100"
+                                    : "text-slate-500 hover:text-slate-300 hover:bg-slate-700/40"
+                                }`}
+                                title={url}
+                              >
+                                {name}
+                              </button>
+                            ))}
+                            <div className="ml-auto text-[9px] font-mono text-slate-600 shrink-0">
+                              {mfAppUrls[mfPreviewApp] ??
+                                mfHostUrl ??
+                                "Start webpack to preview"}
+                            </div>
+                          </div>
+                        )}
+                        {((clientType === "module-federation" && mfError) ||
+                          (clientType !== "module-federation" && nxError)) && (
                           <div className="text-[10px] text-red-400 bg-red-950/40 border-b border-red-800 px-3 py-1.5 shrink-0 font-mono">
-                            {nxError}
+                            {clientType === "module-federation"
+                              ? mfError
+                              : nxError}
                           </div>
                         )}
-                        {/* Starting overlay */}
-                        {nxStarting && (
+                        {(nxStarting || mfStarting) && (
                           <div className="flex-1 flex flex-col items-center justify-center gap-3 text-slate-400 text-sm bg-slate-950">
                             <Loader2 className="w-8 h-8 animate-spin text-cyan-400" />
                             <p className="text-[12px]">
-                              Starting Next.js dev server…
+                              {clientType === "module-federation"
+                                ? "Installing dependencies and starting webpack apps…"
+                                : "Starting Next.js dev server…"}
                             </p>
-                            <p className="text-[10px] text-slate-600">
-                              This takes ~10 seconds on the first run
+                            <p className="text-[10px] text-slate-600 max-w-md text-center px-4">
+                              {clientType === "module-federation"
+                                ? "The first run can take a little longer because npm install runs inside the lab sandbox."
+                                : "This takes ~10 seconds on the first run"}
                             </p>
                           </div>
                         )}
-                        {/* Real Next.js iframe */}
-                        {!nxStarting && nxSandboxUrl && (
-                          <iframe
-                            ref={nxIframeRef}
-                            src={nxSandboxUrl + reactPreviewPath}
-                            className="flex-1 min-h-0 w-full border-0 bg-white"
-                            title="Next.js Preview"
-                            onLoad={() => {
-                              // Try to read the iframe path (may be blocked cross-origin)
-                              try {
-                                const p =
-                                  nxIframeRef.current?.contentWindow?.location
-                                    .pathname;
-                                if (p) {
-                                  setReactPreviewPath(p);
-                                  setReactNavInput(p);
+                        {!nxStarting &&
+                          clientType === "nextjs" &&
+                          nxSandboxUrl && (
+                            <iframe
+                              ref={nxIframeRef}
+                              src={nxSandboxUrl + reactPreviewPath}
+                              className="flex-1 min-h-0 w-full border-0 bg-white"
+                              title="Next.js Preview"
+                              onLoad={() => {
+                                try {
+                                  const p =
+                                    nxIframeRef.current?.contentWindow?.location
+                                      .pathname;
+                                  if (p) {
+                                    setReactPreviewPath(p);
+                                    setReactNavInput(p);
+                                  }
+                                } catch {
+                                  // cross-origin — ignore
                                 }
-                              } catch {
-                                // cross-origin — ignore
-                              }
-                            }}
-                          />
-                        )}
-                        {/* Simulation iframe (when no real server) */}
-                        {!nxStarting && !nxSandboxUrl && (
+                              }}
+                            />
+                          )}
+                        {!mfStarting &&
+                          clientType === "module-federation" &&
+                          mfSandboxId &&
+                          (mfAppUrls[mfPreviewApp] ?? mfHostUrl) && (
+                            <iframe
+                              src={mfAppUrls[mfPreviewApp] ?? mfHostUrl ?? ""}
+                              className="flex-1 min-h-0 w-full border-0 bg-white"
+                              title="Webpack Module Federation Preview"
+                            />
+                          )}
+                        {!mfStarting &&
+                          clientType === "module-federation" &&
+                          !mfSandboxId && (
+                            <div className="flex-1 flex flex-col items-center justify-center gap-3 text-slate-400 text-sm bg-slate-950 px-6 text-center">
+                              <Server className="w-8 h-8 text-cyan-400/70" />
+                              <p className="text-[12px]">
+                                Start the webpack lab to launch the host and
+                                remote dev servers.
+                              </p>
+                              <p className="text-[10px] text-slate-600 max-w-md">
+                                The preview lets you switch between the host and
+                                each remote so you can inspect their output
+                                independently.
+                              </p>
+                            </div>
+                          )}
+                        {!nxStarting && clientType === "react" && (
                           <iframe
                             srcDoc={reactPreviewSrc ?? ""}
                             sandbox="allow-scripts"
@@ -2815,7 +3103,9 @@ export default function CodeRunnerModal() {
                   !serverStarting &&
                   !clientRunning && (
                     <span className="text-slate-600">
-                      Start the server, then run the client
+                      {clientType === "module-federation"
+                        ? "Run webpack to start the host and remotes"
+                        : "Start the server, then run the client"}
                     </span>
                   )}
                 {sandboxOutput.map((line, i) => (
@@ -2864,9 +3154,13 @@ export default function CodeRunnerModal() {
                   {sbxChatMessages.length === 0 && (
                     <p className="text-xs text-slate-600 pt-1">
                       Ask anything about your code —{" "}
-                      {clientType === "react" || clientType === "nextjs" ? (
+                      {clientType === "react" ||
+                      clientType === "nextjs" ||
+                      clientType === "module-federation" ? (
                         <span className="text-slate-500">
-                          "Why does my useEffect run twice?"
+                          {clientType === "module-federation"
+                            ? '"Why is remoteEntry.js 404ing?"'
+                            : '"Why does my useEffect run twice?"'}
                         </span>
                       ) : (
                         <span className="text-slate-500">
@@ -3002,7 +3296,7 @@ export default function CodeRunnerModal() {
                         void handleSbxChatSend();
                       }
                     }}
-                    placeholder={`Ask about your ${clientType === "react" ? "React" : clientType === "nextjs" ? "Next.js" : "sandbox"} code…`}
+                    placeholder={`Ask about your ${clientType === "react" ? "React" : clientType === "nextjs" ? "Next.js" : clientType === "module-federation" ? "webpack module federation" : "sandbox"} code…`}
                     disabled={sbxChatLoading}
                     className="flex-1 bg-transparent text-xs text-slate-200 placeholder-slate-600 outline-none resize-none disabled:opacity-50 max-h-20"
                   />