create-interview-cockpit 0.6.0 → 0.8.0

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

@@ -43,10 +43,18 @@ import {
   generatePreviewHTML,
   defaultForType,
   resolveNextjsEntry,
+  type FrontendLabType,
 } from "../reactLab";
 import {
+  fetchModuleFederationGeneratedFile,
+  fetchModuleFederationGeneratedFiles,
+  fetchModuleFederationStatus,
+  startModuleFederationSandbox,
   startNextjsSandbox,
+  stopModuleFederationSandbox,
+  streamModuleFederationCommand,
   updateNextjsFiles,
+  updateModuleFederationFiles,
   stopNextjsSandbox,
 } from "../api";
 import ReactMarkdown from "react-markdown";
@@ -67,6 +75,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 +211,74 @@ 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;
+}
+
+function isModuleFederationGeneratedPath(filePath: string): boolean {
+  return /(^|\/)dist\//.test(filePath);
+}
+
+function getModuleFederationCommandRoots(
+  files: Record<string, string>,
+): string[] {
+  const roots = new Set<string>(["."]);
+
+  for (const filePath of Object.keys(files)) {
+    const match = filePath.match(/^(apps\/[^/]+)/);
+    if (match) {
+      roots.add(match[1]);
+    }
+  }
+
+  return Array.from(roots).sort((a, b) => {
+    if (a === ".") return -1;
+    if (b === ".") return 1;
+    return a.localeCompare(b);
+  });
+}
+
+type SbxBottomTab = "output" | "console" | "chat";
+
 export default function CodeRunnerModal() {
   const {
     closeCodeRunner,
@@ -246,9 +323,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,14 +342,29 @@ 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");
+  const [mfConsoleOutput, setMfConsoleOutput] = useState<OutputLine[]>([]);
+  const [mfConsoleCommand, setMfConsoleCommand] = useState("npm run build");
+  const [mfConsoleCwd, setMfConsoleCwd] = useState("apps/host");
+  const [mfConsoleRunning, setMfConsoleRunning] = useState(false);
+  const [mfGeneratedFiles, setMfGeneratedFiles] = useState<string[]>([]);
+  const [mfGeneratedFileContents, setMfGeneratedFileContents] = useState<
+    Record<string, string>
+  >({});
+  const [mfLoadingFile, setMfLoadingFile] = useState<string | null>(null);
   // Simulated URL bar state for Next.js mode
   const [reactPreviewPath, setReactPreviewPath] = useState("/");
   const [reactNavInput, setReactNavInput] = useState("/");
   const [reactNavHistory, setReactNavHistory] = useState<string[]>(["/"]);
   const [reactNavIndex, setReactNavIndex] = useState(0);
 
-  // ── Sandbox output tab ("output" | "chat") ──────────────────
-  const [sbxBottomTab, setSbxBottomTab] = useState<"output" | "chat">("output");
+  // ── Sandbox output tab ("output" | "console" | "chat") ─────────────
+  const [sbxBottomTab, setSbxBottomTab] = useState<SbxBottomTab>("output");
 
   // ── Sandbox panel sizes ─────────────────────────────────────────
   // sbxSplit: server pane width as % of the editor row (0–100)
@@ -367,7 +457,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 }
@@ -444,7 +536,9 @@ export default function CodeRunnerModal() {
   };
 
   const outputEndRef = useRef<HTMLDivElement>(null);
+  const mfConsoleEndRef = useRef<HTMLDivElement>(null);
   const nameInputRef = useRef<HTMLInputElement>(null);
+  const mfGeneratedFileRequestRef = useRef<string | null>(null);
   // Tracks how many server log lines have already been flushed to sandboxOutput
   const sandboxLogOffsetRef = useRef(0);
   // Stable ref so unmount cleanup can stop sandbox without stale closure
@@ -474,10 +568,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 +588,17 @@ export default function CodeRunnerModal() {
       }
       setReactPreviewSrc(null);
       setReactClientTab("edit");
+      if (ct === "module-federation") {
+        setServerCollapsed(true);
+        setClientCollapsed(false);
+        setMfPreviewApp("host");
+        setMfConsoleCommand("npm run build");
+        setMfConsoleCwd("apps/host");
+        setMfConsoleOutput([]);
+        setMfGeneratedFiles([]);
+        setMfGeneratedFileContents({});
+        setMfLoadingFile(null);
+      }
     }
   }, [runnerInitialSandbox]);
 
@@ -505,6 +609,20 @@ export default function CodeRunnerModal() {
     outputEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [output]);
 
+  useEffect(() => {
+    if (sbxBottomTab === "console") {
+      mfConsoleEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [mfConsoleOutput, mfConsoleRunning, sbxBottomTab]);
+
+  useEffect(() => {
+    if (clientType !== "module-federation") return;
+    const roots = getModuleFederationCommandRoots(reactFiles);
+    if (!roots.includes(mfConsoleCwd)) {
+      setMfConsoleCwd(roots.find((root) => root !== ".") ?? ".");
+    }
+  }, [clientType, reactFiles, mfConsoleCwd]);
+
   // ── Sandbox divider drag handlers ────────────────────────────────
   useEffect(() => {
     const onMove = (e: MouseEvent) => {
@@ -979,6 +1097,112 @@ export default function CodeRunnerModal() {
     }
   }, [nxStarting, reactFiles]);
 
+  const refreshModuleFederationGeneratedFiles = useCallback(
+    async (sandboxId: string | null = mfSandboxId): Promise<string[]> => {
+      if (!sandboxId) {
+        setMfGeneratedFiles([]);
+        setMfGeneratedFileContents({});
+        setMfLoadingFile(null);
+        return [];
+      }
+
+      try {
+        const files = await fetchModuleFederationGeneratedFiles(sandboxId);
+        setMfGeneratedFiles(files);
+        setMfGeneratedFileContents((prev) =>
+          Object.fromEntries(
+            Object.entries(prev).filter(([filePath]) =>
+              files.includes(filePath),
+            ),
+          ),
+        );
+
+        if (
+          reactActiveFile &&
+          !Object.prototype.hasOwnProperty.call(reactFiles, reactActiveFile) &&
+          !files.includes(reactActiveFile)
+        ) {
+          setReactActiveFile(Object.keys(reactFiles)[0] ?? files[0] ?? "");
+        }
+
+        return files;
+      } catch (err: any) {
+        setMfError(err?.message ?? String(err));
+        return [];
+      }
+    },
+    [mfSandboxId, reactActiveFile, reactFiles],
+  );
+
+  const startModuleFederationServer = useCallback(async () => {
+    if (mfStarting) return;
+    setMfStarting(true);
+    setMfError(null);
+    setMfGeneratedFiles([]);
+    setMfGeneratedFileContents({});
+    setMfLoadingFile(null);
+    setMfConsoleOutput([]);
+    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);
+      void refreshModuleFederationGeneratedFiles(info.id);
+      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, refreshModuleFederationGeneratedFiles]);
+
+  const stopModuleFederationServer = useCallback(async () => {
+    if (!mfSandboxId) return;
+    await stopModuleFederationSandbox(mfSandboxId).catch(() => {});
+    setMfSandboxId(null);
+    setMfHostUrl(null);
+    setMfAppUrls({});
+    setMfError(null);
+    setMfGeneratedFiles([]);
+    setMfGeneratedFileContents({});
+    setMfLoadingFile(null);
+    setMfConsoleRunning(false);
+    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 +1216,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 +1236,196 @@ 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);
+          setMfGeneratedFiles([]);
+          setMfGeneratedFileContents({});
+          setMfLoadingFile(null);
+          setMfConsoleRunning(false);
+          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]);
+
+  useEffect(() => {
+    if (clientType !== "module-federation" || !mfSandboxId) return;
+    if (!reactActiveFile) return;
+    if (Object.prototype.hasOwnProperty.call(reactFiles, reactActiveFile)) {
+      return;
+    }
+    if (!mfGeneratedFiles.includes(reactActiveFile)) return;
+    if (mfGeneratedFileContents[reactActiveFile] !== undefined) return;
+    if (mfGeneratedFileRequestRef.current === reactActiveFile) return;
+
+    const filePath = reactActiveFile;
+    let cancelled = false;
+    mfGeneratedFileRequestRef.current = filePath;
+    setMfLoadingFile(filePath);
+
+    void fetchModuleFederationGeneratedFile(mfSandboxId, filePath)
+      .then(({ content }) => {
+        if (cancelled) return;
+        setMfGeneratedFileContents((prev) => ({
+          ...prev,
+          [filePath]: content,
+        }));
+      })
+      .catch((error: any) => {
+        if (cancelled) return;
+        const message = error?.message ?? String(error);
+        setMfError(message);
+        setMfGeneratedFileContents((prev) => ({
+          ...prev,
+          [filePath]: `Failed to load generated file.\n\n${message}`,
+        }));
+      })
+      .finally(() => {
+        if (mfGeneratedFileRequestRef.current === filePath) {
+          mfGeneratedFileRequestRef.current = null;
+        }
+        if (cancelled) return;
+        setMfLoadingFile((current) => (current === filePath ? null : current));
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    clientType,
+    mfGeneratedFileContents,
+    mfGeneratedFiles,
+    mfSandboxId,
+    reactActiveFile,
+    reactFiles,
+  ]);
+
+  const runModuleFederationCommand = useCallback(async () => {
+    if (!mfSandboxId || mfConsoleRunning) return;
+    const command = mfConsoleCommand.trim();
+    if (!command) return;
+
+    setMfError(null);
+    setMfConsoleRunning(true);
+    setSbxBottomTab("console");
+
+    let streamError: string | null = null;
+
+    try {
+      await streamModuleFederationCommand(
+        {
+          id: mfSandboxId,
+          command,
+          cwd: mfConsoleCwd === "." ? undefined : mfConsoleCwd,
+        },
+        (message) => {
+          if (message.type === "output") {
+            setMfConsoleOutput((prev) => [
+              ...prev,
+              {
+                kind: message.kind,
+                text: message.text,
+                source: "server",
+              },
+            ]);
+            return;
+          }
+
+          if (message.type === "error") {
+            streamError = message.error;
+            setMfConsoleOutput((prev) => [
+              ...prev,
+              {
+                kind: "stderr",
+                text: message.error,
+                source: "server",
+              },
+            ]);
+          }
+        },
+      );
+
+      if (streamError) {
+        throw new Error(streamError);
+      }
+
+      const files = await refreshModuleFederationGeneratedFiles(mfSandboxId);
+      setMfConsoleOutput((prev) => [
+        ...prev,
+        {
+          kind: "info",
+          text:
+            files.length > 0
+              ? `Refreshed ${files.length} generated file${files.length === 1 ? "" : "s"}.`
+              : "No generated dist files were found.",
+          source: "server",
+        },
+      ]);
+    } catch (err: any) {
+      const message = err?.message ?? String(err);
+      setMfError(message);
+      if (streamError !== message) {
+        setMfConsoleOutput((prev) => [
+          ...prev,
+          {
+            kind: "stderr",
+            text: message,
+            source: "server",
+          },
+        ]);
+      }
+    } finally {
+      setMfConsoleRunning(false);
+    }
+  }, [
+    mfConsoleCommand,
+    mfConsoleCwd,
+    mfConsoleRunning,
+    mfSandboxId,
+    refreshModuleFederationGeneratedFiles,
+  ]);
+
   // Clean up Next.js server when the modal is closed or mode changes away from nextjs
   const prevClientTypeRef = useRef(clientType);
   useEffect(() => {
@@ -1010,21 +1436,49 @@ 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({});
+      setMfGeneratedFiles([]);
+      setMfGeneratedFileContents({});
+      setMfLoadingFile(null);
+      setMfConsoleRunning(false);
+      setSbxBottomTab((current) =>
+        current === "console" ? "output" : current,
+      );
+    }
+  }, [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 !== "module-federation") {
+        setMfGeneratedFiles([]);
+        setMfGeneratedFileContents({});
+        setMfLoadingFile(null);
+        setMfConsoleOutput([]);
+        setMfConsoleRunning(false);
+        setSbxBottomTab((current) =>
+          current === "console" ? "output" : current,
+        );
+      }
+      if (ct !== "script") {
         const defs = defaultForType(ct);
         setReactFiles(defs.files);
         setReactActiveFile(defs.activeFile);
@@ -1036,6 +1490,16 @@ export default function CodeRunnerModal() {
           setReactNavHistory(["/"]);
           setReactNavIndex(0);
         }
+        if (ct === "module-federation") {
+          setServerCollapsed(true);
+          setClientCollapsed(false);
+          setMfPreviewApp("host");
+          setMfError(null);
+        }
+        if (ct === "module-federation") {
+          setMfConsoleCommand("npm run build");
+          setMfConsoleCwd("apps/host");
+        }
       }
     },
     [clientType],
@@ -1061,12 +1525,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,
@@ -1278,6 +1749,27 @@ export default function CodeRunnerModal() {
         minHeight: MIN_H,
       };
 
+  const moduleFederationCommandRoots =
+    getModuleFederationCommandRoots(reactFiles);
+  const moduleFederationGeneratedFiles = mfGeneratedFiles.filter(
+    (filePath) => !Object.prototype.hasOwnProperty.call(reactFiles, filePath),
+  );
+  const moduleFederationGeneratedFileSet = new Set(
+    moduleFederationGeneratedFiles,
+  );
+  const visibleReactFiles =
+    clientType === "module-federation"
+      ? Array.from(
+          new Set([
+            ...Object.keys(reactFiles),
+            ...moduleFederationGeneratedFiles,
+          ]),
+        )
+      : Object.keys(reactFiles);
+  const isActiveModuleFederationGeneratedFile =
+    clientType === "module-federation" &&
+    moduleFederationGeneratedFileSet.has(reactActiveFile);
+
   return (
     <div
       className="fixed z-[60] flex flex-col bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden select-none"
@@ -1944,7 +2436,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 +2458,9 @@ export default function CodeRunnerModal() {
                           ? "JS"
                           : ct === "react"
                             ? "React"
-                            : "Next"}
+                            : ct === "nextjs"
+                              ? "Next"
+                              : "Webpack"}
                       </button>
                     ))}
                   </div>
@@ -2023,9 +2524,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 +2540,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 +2596,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 +2785,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 +2827,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 +2839,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,27 +2852,18 @@ 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(visibleReactFiles);
 
-                          const fileIcon = (name: string) => {
+                          const fileIcon = (
+                            name: string,
+                            isGenerated = false,
+                          ) => {
+                            if (isGenerated)
+                              return (
+                                <span className="text-emerald-400 mr-1 text-[8px] font-semibold uppercase">
+                                  dist
+                                </span>
+                              );
                             if (name.endsWith(".tsx") || name.endsWith(".jsx"))
                               return (
                                 <span className="text-cyan-400 mr-1 text-[9px]">
@@ -2315,84 +2885,117 @@ export default function CodeRunnerModal() {
 
                           const renderFile = (path: string, indent = 0) => (
                             <div key={path} className="group flex items-center">
-                              <button
-                                type="button"
-                                onClick={() => {
-                                  setReactActiveFile(path);
-                                  setReactClientTab("edit");
-                                }}
-                                style={{ paddingLeft: `${8 + indent * 10}px` }}
-                                className={`flex-1 flex items-center gap-0.5 py-0.5 pr-1 text-left text-[10px] font-mono truncate transition-colors ${
-                                  path === reactActiveFile &&
-                                  reactClientTab === "edit"
-                                    ? "bg-slate-700 text-slate-100"
-                                    : "text-slate-400 hover:bg-slate-800 hover:text-slate-200"
-                                }`}
-                                title={path}
-                              >
-                                {fileIcon(path.split("/").pop() ?? path)}
-                                <span className="truncate">
-                                  {path.split("/").pop()}
-                                </span>
-                              </button>
-                              <button
-                                type="button"
-                                onClick={() => {
-                                  if (Object.keys(reactFiles).length <= 1)
-                                    return;
-                                  const remaining = Object.keys(
-                                    reactFiles,
-                                  ).filter((f) => f !== path);
-                                  setReactFiles((prev) => {
-                                    const next = { ...prev };
-                                    delete next[path];
-                                    return next;
-                                  });
-                                  if (reactActiveFile === path)
-                                    setReactActiveFile(remaining[0] ?? "");
-                                }}
-                                className="opacity-0 group-hover:opacity-100 p-0.5 mr-1 rounded text-slate-600 hover:text-red-400 transition-all shrink-0"
-                                title="Delete file"
-                              >
-                                <X className="w-2.5 h-2.5" />
-                              </button>
+                              {(() => {
+                                const isGenerated =
+                                  moduleFederationGeneratedFileSet.has(path);
+                                return (
+                                  <>
+                                    <button
+                                      type="button"
+                                      onClick={() => {
+                                        setReactActiveFile(path);
+                                        setReactClientTab("edit");
+                                      }}
+                                      style={{
+                                        paddingLeft: `${8 + indent * 10}px`,
+                                      }}
+                                      className={`flex-1 flex items-center gap-0.5 py-0.5 pr-1 text-left text-[10px] font-mono truncate transition-colors ${
+                                        path === reactActiveFile &&
+                                        reactClientTab === "edit"
+                                          ? isGenerated
+                                            ? "bg-slate-700 text-emerald-100"
+                                            : "bg-slate-700 text-slate-100"
+                                          : isGenerated
+                                            ? "text-emerald-300/80 hover:bg-slate-800 hover:text-emerald-100"
+                                            : "text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+                                      }`}
+                                      title={
+                                        isGenerated
+                                          ? `${path} (generated)`
+                                          : path
+                                      }
+                                    >
+                                      {fileIcon(
+                                        path.split("/").pop() ?? path,
+                                        isGenerated,
+                                      )}
+                                      <span className="truncate">
+                                        {path.split("/").pop()}
+                                      </span>
+                                    </button>
+                                    {!isGenerated && (
+                                      <button
+                                        type="button"
+                                        onClick={() => {
+                                          if (
+                                            Object.keys(reactFiles).length <= 1
+                                          )
+                                            return;
+                                          const remaining = Object.keys(
+                                            reactFiles,
+                                          ).filter((f) => f !== path);
+                                          setReactFiles((prev) => {
+                                            const next = { ...prev };
+                                            delete next[path];
+                                            return next;
+                                          });
+                                          if (reactActiveFile === path)
+                                            setReactActiveFile(
+                                              remaining[0] ?? "",
+                                            );
+                                        }}
+                                        className="opacity-0 group-hover:opacity-100 p-0.5 mr-1 rounded text-slate-600 hover:text-red-400 transition-all shrink-0"
+                                        title="Delete file"
+                                      >
+                                        <X className="w-2.5 h-2.5" />
+                                      </button>
+                                    )}
+                                  </>
+                                );
+                              })()}
                             </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 +3005,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 +3035,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
@@ -2488,31 +3052,52 @@ export default function CodeRunnerModal() {
                         }
                       />
                     ) : reactClientTab === "edit" ? (
-                      <SyntaxEditor
-                        key={reactActiveFile}
-                        value={reactFiles[reactActiveFile] ?? ""}
-                        onChange={(val) =>
-                          setReactFiles((prev) => ({
-                            ...prev,
-                            [reactActiveFile]: val,
-                          }))
-                        }
-                        language={
-                          reactActiveFile.endsWith(".ts") ||
-                          reactActiveFile.endsWith(".tsx")
-                            ? "typescript"
-                            : "javascript"
-                        }
-                        fontSize="12px"
-                        focusRingClass="ring-cyan-500/30"
-                        placeholder={`// ${reactActiveFile}\n`}
-                      />
+                      isActiveModuleFederationGeneratedFile ? (
+                        <div className="absolute inset-0 flex flex-col bg-slate-950">
+                          <div className="shrink-0 border-b border-slate-800 bg-slate-900/80 px-3 py-1.5 text-[10px] font-mono text-emerald-300">
+                            Read-only build artifact from dist/. Run the webpack
+                            console again to refresh it.
+                          </div>
+                          <div className="flex-1 overflow-auto px-3 py-3 font-mono text-[12px] leading-relaxed text-slate-200">
+                            {mfLoadingFile === reactActiveFile &&
+                            mfGeneratedFileContents[reactActiveFile] ===
+                              undefined ? (
+                              <div className="flex h-full items-center justify-center gap-2 text-slate-500">
+                                <Loader2 className="w-4 h-4 animate-spin" />
+                                <span>Loading generated file…</span>
+                              </div>
+                            ) : (
+                              <pre className="m-0 min-w-max whitespace-pre">
+                                {mfGeneratedFileContents[reactActiveFile] ?? ""}
+                              </pre>
+                            )}
+                          </div>
+                        </div>
+                      ) : (
+                        <SyntaxEditor
+                          key={reactActiveFile}
+                          value={reactFiles[reactActiveFile] ?? ""}
+                          onChange={(val) =>
+                            setReactFiles((prev) => ({
+                              ...prev,
+                              [reactActiveFile]: val,
+                            }))
+                          }
+                          language={
+                            reactActiveFile.endsWith(".ts") ||
+                            reactActiveFile.endsWith(".tsx")
+                              ? "typescript"
+                              : "javascript"
+                          }
+                          fontSize="12px"
+                          focusRingClass="ring-cyan-500/30"
+                          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 +3120,6 @@ export default function CodeRunnerModal() {
                             >
                               <ChevronLeft className="w-3.5 h-3.5" />
                             </button>
-                            {/* Forward */}
                             <button
                               type="button"
                               disabled={
@@ -2560,7 +3144,6 @@ export default function CodeRunnerModal() {
                             >
                               <ChevronRight className="w-3.5 h-3.5" />
                             </button>
-                            {/* Refresh */}
                             <button
                               type="button"
                               onClick={() => {
@@ -2582,7 +3165,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 +3203,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 +3229,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"
@@ -2741,6 +3376,20 @@ export default function CodeRunnerModal() {
                 ) : null}
                 Output
               </button>
+              {clientType === "module-federation" && (
+                <button
+                  type="button"
+                  onClick={() => setSbxBottomTab("console")}
+                  className={`flex items-center gap-1.5 px-3 py-1.5 text-[10px] uppercase tracking-wider font-medium border-b-2 transition-colors ${
+                    sbxBottomTab === "console"
+                      ? "border-cyan-500 text-cyan-300"
+                      : "border-transparent text-slate-500 hover:text-slate-300"
+                  }`}
+                >
+                  <Terminal className="w-3 h-3" />
+                  Console
+                </button>
+              )}
               <button
                 type="button"
                 onClick={() => {
@@ -2761,6 +3410,9 @@ export default function CodeRunnerModal() {
                 (serverStarting || clientRunning) && (
                   <Loader2 className="w-3 h-3 text-emerald-400 animate-spin mr-1" />
                 )}
+              {sbxBottomTab === "console" && mfConsoleRunning && (
+                <Loader2 className="w-3 h-3 text-cyan-400 animate-spin mr-1" />
+              )}
               {sbxBottomTab === "output" && sandboxOutput.length > 0 && (
                 <div className="flex items-center gap-1 mr-1">
                   <button
@@ -2785,6 +3437,30 @@ export default function CodeRunnerModal() {
                   </button>
                 </div>
               )}
+              {sbxBottomTab === "console" && mfConsoleOutput.length > 0 && (
+                <div className="flex items-center gap-1 mr-1">
+                  <button
+                    type="button"
+                    onClick={() =>
+                      navigator.clipboard.writeText(
+                        mfConsoleOutput.map((line) => line.text).join("\n"),
+                      )
+                    }
+                    className="p-0.5 rounded text-slate-600 hover:text-slate-300 transition-colors"
+                    title="Copy console output"
+                  >
+                    <Copy className="w-3 h-3" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setMfConsoleOutput([])}
+                    className="p-0.5 rounded text-slate-600 hover:text-slate-300 transition-colors"
+                    title="Clear console output"
+                  >
+                    <Trash2 className="w-3 h-3" />
+                  </button>
+                </div>
+              )}
               {sbxBottomTab === "chat" && sbxChatMessages.length > 0 && (
                 <button
                   type="button"
@@ -2815,7 +3491,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) => (
@@ -2854,6 +3532,98 @@ export default function CodeRunnerModal() {
               </div>
             )}
 
+            {sbxBottomTab === "console" && (
+              <div className="flex-1 min-h-0 flex flex-col">
+                <div className="shrink-0 border-b border-slate-800 bg-slate-900/70 px-3 py-2 flex items-center gap-2">
+                  <select
+                    value={mfConsoleCwd}
+                    onChange={(e) => setMfConsoleCwd(e.target.value)}
+                    disabled={!mfSandboxId || mfConsoleRunning}
+                    className="bg-slate-950 border border-slate-700 rounded px-2 py-1 text-[11px] font-mono text-slate-200 outline-none disabled:opacity-50"
+                  >
+                    {moduleFederationCommandRoots.map((root) => (
+                      <option key={root} value={root}>
+                        {root === "." ? "root" : root}
+                      </option>
+                    ))}
+                  </select>
+                  <input
+                    value={mfConsoleCommand}
+                    onChange={(e) => setMfConsoleCommand(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        void runModuleFederationCommand();
+                      }
+                    }}
+                    disabled={!mfSandboxId || mfConsoleRunning}
+                    placeholder="npm run build"
+                    className="flex-1 bg-slate-950 border border-slate-700 rounded px-2 py-1 text-[11px] font-mono text-slate-200 placeholder-slate-600 outline-none disabled:opacity-50"
+                    spellCheck={false}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => void runModuleFederationCommand()}
+                    disabled={
+                      !mfSandboxId ||
+                      mfConsoleRunning ||
+                      !mfConsoleCommand.trim()
+                    }
+                    className="flex items-center gap-1 px-2.5 py-1 rounded text-[11px] font-medium bg-cyan-600/20 hover:bg-cyan-600/35 text-cyan-300 disabled:opacity-50 transition-colors shrink-0"
+                  >
+                    {mfConsoleRunning ? (
+                      <Loader2 className="w-3 h-3 animate-spin" />
+                    ) : (
+                      <Play className="w-3 h-3" />
+                    )}
+                    Run
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => void refreshModuleFederationGeneratedFiles()}
+                    disabled={!mfSandboxId || mfConsoleRunning}
+                    className="px-2 py-1 rounded text-[10px] font-medium text-slate-400 hover:text-slate-200 hover:bg-slate-800 disabled:opacity-50 transition-colors shrink-0"
+                  >
+                    Refresh dist
+                  </button>
+                </div>
+                <div className="shrink-0 px-3 py-1.5 text-[10px] text-slate-500 border-b border-slate-800">
+                  Run npm scripts in the selected webpack app. Generated dist
+                  files appear in the explorer as read-only artifacts.
+                </div>
+                <div className="flex-1 overflow-y-auto px-3 py-2 font-mono text-[12px] leading-relaxed">
+                  {mfConsoleOutput.length === 0 && !mfConsoleRunning && (
+                    <span className="text-slate-600">
+                      {mfSandboxId
+                        ? "Run npm run build in apps/host, apps/profile, or apps/checkout to inspect dist/."
+                        : "Start webpack first, then run npm commands here."}
+                    </span>
+                  )}
+                  {mfConsoleOutput.map((line, index) => (
+                    <div key={index} className="flex items-start gap-2">
+                      <span className="shrink-0 text-[9px] font-bold mt-0.5 w-7 text-right text-cyan-600">
+                        cmd
+                      </span>
+                      <span
+                        className={
+                          line.kind === "stderr"
+                            ? "text-red-400 whitespace-pre-wrap"
+                            : line.kind === "warn"
+                              ? "text-amber-400 whitespace-pre-wrap"
+                              : line.kind === "info"
+                                ? "text-slate-500 italic whitespace-pre-wrap"
+                                : "text-slate-200 whitespace-pre-wrap"
+                        }
+                      >
+                        {line.text}
+                      </span>
+                    </div>
+                  ))}
+                  <div ref={mfConsoleEndRef} />
+                </div>
+              </div>
+            )}
+
             {/* Chat tab */}
             {sbxBottomTab === "chat" && (
               <>
@@ -2864,9 +3634,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 +3776,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"
                   />