create-interview-cockpit 0.7.0 → 0.9.0

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

@@ -46,10 +46,13 @@ import {
   type FrontendLabType,
 } from "../reactLab";
 import {
+  fetchModuleFederationGeneratedFile,
+  fetchModuleFederationGeneratedFiles,
   fetchModuleFederationStatus,
   startModuleFederationSandbox,
   startNextjsSandbox,
   stopModuleFederationSandbox,
+  streamModuleFederationCommand,
   updateNextjsFiles,
   updateModuleFederationFiles,
   stopNextjsSandbox,
@@ -251,6 +254,37 @@ function buildFileTree(paths: string[]): FileTreeNode {
   return root;
 }
 
+function isModuleFederationGeneratedPath(filePath: string): boolean {
+  return /(^|\/)dist\//.test(filePath);
+}
+
+function normalizeModuleFederationPreviewPath(input: string): string {
+  const trimmed = input.trim();
+  if (!trimmed) return "/";
+  return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+}
+
+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,
@@ -314,20 +348,32 @@ export default function CodeRunnerModal() {
   const [nxStarting, setNxStarting] = useState(false);
   const [nxError, setNxError] = useState<string | null>(null);
   const nxIframeRef = useRef<HTMLIFrameElement>(null);
+  const mfIframeRef = 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 [mfPreviewPath, setMfPreviewPath] = useState("/");
+  const [mfNavInput, setMfNavInput] = useState("/");
+  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)
@@ -499,7 +545,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
@@ -553,6 +601,14 @@ export default function CodeRunnerModal() {
         setServerCollapsed(true);
         setClientCollapsed(false);
         setMfPreviewApp("host");
+        setMfPreviewPath("/");
+        setMfNavInput("/");
+        setMfConsoleCommand("npm run build");
+        setMfConsoleCwd("apps/host");
+        setMfConsoleOutput([]);
+        setMfGeneratedFiles([]);
+        setMfGeneratedFileContents({});
+        setMfLoadingFile(null);
       }
     }
   }, [runnerInitialSandbox]);
@@ -564,6 +620,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) => {
@@ -1038,10 +1108,51 @@ 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([
       {
@@ -1058,9 +1169,12 @@ export default function CodeRunnerModal() {
       setMfPreviewApp(
         info.appUrls.host ? "host" : (Object.keys(info.appUrls)[0] ?? "host"),
       );
+      setMfPreviewPath("/");
+      setMfNavInput("/");
       setReactClientTab("preview");
       setServerCollapsed(true);
       setClientCollapsed(false);
+      void refreshModuleFederationGeneratedFiles(info.id);
       setSandboxOutput((prev) => [
         ...prev,
         {
@@ -1079,7 +1193,7 @@ export default function CodeRunnerModal() {
     } finally {
       setMfStarting(false);
     }
-  }, [mfStarting, reactFiles]);
+  }, [mfStarting, reactFiles, refreshModuleFederationGeneratedFiles]);
 
   const stopModuleFederationServer = useCallback(async () => {
     if (!mfSandboxId) return;
@@ -1088,6 +1202,10 @@ export default function CodeRunnerModal() {
     setMfHostUrl(null);
     setMfAppUrls({});
     setMfError(null);
+    setMfGeneratedFiles([]);
+    setMfGeneratedFileContents({});
+    setMfLoadingFile(null);
+    setMfConsoleRunning(false);
     setSandboxOutput((prev) => [
       ...prev,
       {
@@ -1148,6 +1266,10 @@ export default function CodeRunnerModal() {
           setMfHostUrl(null);
           setMfAppUrls({});
           setMfError(null);
+          setMfGeneratedFiles([]);
+          setMfGeneratedFileContents({});
+          setMfLoadingFile(null);
+          setMfConsoleRunning(false);
           return;
         }
         if (status.hostUrl) setMfHostUrl(status.hostUrl);
@@ -1180,6 +1302,143 @@ export default function CodeRunnerModal() {
     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(() => {
@@ -1199,6 +1458,13 @@ export default function CodeRunnerModal() {
       setMfSandboxId(null);
       setMfHostUrl(null);
       setMfAppUrls({});
+      setMfGeneratedFiles([]);
+      setMfGeneratedFileContents({});
+      setMfLoadingFile(null);
+      setMfConsoleRunning(false);
+      setSbxBottomTab((current) =>
+        current === "console" ? "output" : current,
+      );
     }
   }, [clientType, nxSandboxId, mfSandboxId]);
 
@@ -1215,6 +1481,16 @@ export default function CodeRunnerModal() {
     (ct: FrontendClientType) => {
       if (ct === clientType) return;
       setClientType(ct);
+      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);
@@ -1231,8 +1507,14 @@ export default function CodeRunnerModal() {
           setServerCollapsed(true);
           setClientCollapsed(false);
           setMfPreviewApp("host");
+          setMfPreviewPath("/");
+          setMfNavInput("/");
           setMfError(null);
         }
+        if (ct === "module-federation") {
+          setMfConsoleCommand("npm run build");
+          setMfConsoleCwd("apps/host");
+        }
       }
     },
     [clientType],
@@ -1482,6 +1764,37 @@ 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 moduleFederationPreviewBaseUrl =
+    mfAppUrls[mfPreviewApp] ?? mfHostUrl ?? "";
+  const moduleFederationPreviewPath =
+    normalizeModuleFederationPreviewPath(mfPreviewPath);
+  const moduleFederationPreviewUrl = moduleFederationPreviewBaseUrl
+    ? `${moduleFederationPreviewBaseUrl}${moduleFederationPreviewPath}`
+    : "";
+  const moduleFederationPreviewHostLabel = moduleFederationPreviewBaseUrl
+    ? moduleFederationPreviewBaseUrl.replace(/^https?:\/\//, "")
+    : "localhost";
+  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"
@@ -2564,9 +2877,18 @@ export default function CodeRunnerModal() {
                       {/* Tree nodes */}
                       <div className="flex-1 py-1">
                         {(() => {
-                          const tree = buildFileTree(Object.keys(reactFiles));
+                          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]">
@@ -2588,47 +2910,74 @@ 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>
                           );
 
@@ -2728,25 +3077,48 @@ 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`}
+                        />
+                      )
                     ) : (
                       <div className="w-full h-full flex flex-col">
                         {clientType === "nextjs" && (
@@ -2883,7 +3255,7 @@ export default function CodeRunnerModal() {
                           </div>
                         )}
                         {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">
+                          <div className="flex items-center gap-1 px-2 py-1 bg-slate-800 border-b border-slate-700 shrink-0 min-w-0">
                             {Object.entries(mfAppUrls).map(([name, url]) => (
                               <button
                                 key={name}
@@ -2899,11 +3271,69 @@ export default function CodeRunnerModal() {
                                 {name}
                               </button>
                             ))}
-                            <div className="ml-auto text-[9px] font-mono text-slate-600 shrink-0">
-                              {mfAppUrls[mfPreviewApp] ??
-                                mfHostUrl ??
-                                "Start webpack to preview"}
-                            </div>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                if (
+                                  mfIframeRef.current &&
+                                  moduleFederationPreviewUrl
+                                ) {
+                                  mfIframeRef.current.src =
+                                    moduleFederationPreviewUrl;
+                                }
+                              }}
+                              className="p-0.5 rounded text-slate-500 hover:text-slate-200 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shrink-0"
+                              title="Refresh"
+                              disabled={!moduleFederationPreviewUrl}
+                            >
+                              <svg
+                                className="w-3 h-3"
+                                viewBox="0 0 16 16"
+                                fill="currentColor"
+                              >
+                                <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>
+                            <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-cyan-500/60 transition-colors min-w-0"
+                              onSubmit={(e) => {
+                                e.preventDefault();
+                                const nextPath =
+                                  normalizeModuleFederationPreviewPath(
+                                    mfNavInput,
+                                  );
+                                setMfPreviewPath(nextPath);
+                                setMfNavInput(nextPath);
+                                if (
+                                  nextPath === moduleFederationPreviewPath &&
+                                  mfIframeRef.current &&
+                                  moduleFederationPreviewBaseUrl
+                                ) {
+                                  mfIframeRef.current.src = `${moduleFederationPreviewBaseUrl}${nextPath}`;
+                                }
+                              }}
+                            >
+                              <span className="text-slate-600 text-[9px] font-mono select-none shrink-0">
+                                {moduleFederationPreviewHostLabel}
+                              </span>
+                              <input
+                                value={mfNavInput}
+                                onChange={(e) => setMfNavInput(e.target.value)}
+                                onFocus={(e) => e.target.select()}
+                                className="flex-1 bg-transparent text-[11px] font-mono text-slate-200 outline-none placeholder-slate-600 min-w-0"
+                                placeholder="/"
+                                spellCheck={false}
+                              />
+                            </form>
+                            {moduleFederationPreviewUrl ? (
+                              <span className="text-[9px] font-mono text-green-400 shrink-0">
+                                ● live
+                              </span>
+                            ) : (
+                              <span className="text-[9px] font-mono text-slate-600 shrink-0">
+                                Start webpack to preview
+                              </span>
+                            )}
                           </div>
                         )}
                         {((clientType === "module-federation" && mfError) ||
@@ -2955,9 +3385,10 @@ export default function CodeRunnerModal() {
                         {!mfStarting &&
                           clientType === "module-federation" &&
                           mfSandboxId &&
-                          (mfAppUrls[mfPreviewApp] ?? mfHostUrl) && (
+                          moduleFederationPreviewUrl && (
                             <iframe
-                              src={mfAppUrls[mfPreviewApp] ?? mfHostUrl ?? ""}
+                              ref={mfIframeRef}
+                              src={moduleFederationPreviewUrl}
                               className="flex-1 min-h-0 w-full border-0 bg-white"
                               title="Webpack Module Federation Preview"
                             />
@@ -3029,6 +3460,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={() => {
@@ -3049,6 +3494,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
@@ -3073,6 +3521,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"
@@ -3144,6 +3616,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" && (
               <>