create-interview-cockpit 0.5.0 → 0.7.0

package/template/client/src/reactLab.ts

@@ -0,0 +1,960 @@
+import type { FrontendLabWorkspace } from "./types";
+
+export type FrontendLabType = FrontendLabWorkspace["type"];
+
+// ── Default file contents ────────────────────────────────────────────────────
+
+const REACT_DEFAULT_FILES: Record<string, string> = {
+  "App.tsx": `import { useState } from "react";
+import { Counter } from "./Counter";
+import type { User } from "./types";
+
+const user: User = { name: "Alice", age: 28 };
+
+export default function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div style={{ padding: "2rem", fontFamily: "system-ui, sans-serif" }}>
+      <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", marginBottom: "0.5rem" }}>
+        React + TypeScript Lab
+      </h1>
+      <p style={{ color: "#64748b", marginBottom: "1.5rem" }}>
+        Welcome, {user.name}! Practice React fundamentals here.
+      </p>
+      <Counter initialCount={count} onCountChange={setCount} />
+      <p style={{ marginTop: "1rem", color: "#94a3b8", fontSize: "0.875rem" }}>
+        Parent count: {count}
+      </p>
+    </div>
+  );
+}
+`,
+  "Counter.tsx": `import { useState, useCallback } from "react";
+import type { CounterProps } from "./types";
+
+// Stateful child component — receives props from App
+export function Counter({ initialCount = 0, onCountChange }: CounterProps) {
+  const [count, setCount] = useState(initialCount);
+
+  const increment = useCallback(() => {
+    setCount((c) => {
+      const next = c + 1;
+      onCountChange?.(next);
+      return next;
+    });
+  }, [onCountChange]);
+
+  const decrement = useCallback(() => {
+    setCount((c) => {
+      const next = c - 1;
+      onCountChange?.(next);
+      return next;
+    });
+  }, [onCountChange]);
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+      <button
+        onClick={decrement}
+        style={{
+          padding: "0.5rem 1.25rem",
+          fontSize: "1.25rem",
+          cursor: "pointer",
+          borderRadius: "0.375rem",
+          border: "1px solid #cbd5e1",
+          background: "#f8fafc",
+        }}
+      >
+        −
+      </button>
+      <span style={{ fontSize: "2rem", fontWeight: "bold", minWidth: "3rem", textAlign: "center" }}>
+        {count}
+      </span>
+      <button
+        onClick={increment}
+        style={{
+          padding: "0.5rem 1.25rem",
+          fontSize: "1.25rem",
+          cursor: "pointer",
+          borderRadius: "0.375rem",
+          border: "1px solid #cbd5e1",
+          background: "#f8fafc",
+        }}
+      >
+        +
+      </button>
+    </div>
+  );
+}
+`,
+  "types.ts": `// Type definitions — shared across components
+
+export interface User {
+  name: string;
+  age: number;
+}
+
+export interface CounterProps {
+  initialCount?: number;
+  /** Callback that fires whenever the count changes */
+  onCountChange?: (count: number) => void;
+}
+`,
+};
+
+const NEXTJS_DEFAULT_FILES: Record<string, string> = {
+  "app/page.tsx": `// Server Component (default in App Router — no "use client" needed)
+// In real Next.js this could be async and fetch data directly
+import { Counter } from "../components/Counter";
+
+export default function HomePage() {
+  // In real Next.js: const data = await fetch('/api/...').then(r => r.json())
+  const message = "Server Components render on the server — no useState here!";
+
+  return (
+    <div style={{ padding: "2rem", fontFamily: "system-ui, sans-serif" }}>
+      <h1 style={{ fontSize: "1.5rem", fontWeight: "bold", marginBottom: "0.5rem" }}>
+        Next.js App Router Lab
+      </h1>
+      <p style={{ color: "#64748b", marginBottom: "1.5rem" }}>{message}</p>
+      {/* Counter is a Client Component — it can use useState */}
+      <Counter />
+    </div>
+  );
+}
+`,
+  "app/layout.tsx": `// Root Layout — always a Server Component
+// Wraps ALL pages; persists across navigations without re-mounting
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body style={{ margin: 0, background: "#f8fafc", fontFamily: "system-ui, sans-serif" }}>
+        <nav
+          style={{
+            padding: "0.75rem 2rem",
+            background: "#0070f3",
+            color: "#fff",
+            marginBottom: "0",
+          }}
+        >
+          <strong>My Next.js App</strong>
+        </nav>
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+}
+`,
+  "app/loading.tsx": `// loading.tsx — shown while the page is fetching data (Suspense boundary)
+// Next.js displays this automatically while the page component awaits
+
+export default function Loading() {
+  return (
+    <div style={{ padding: "2rem", color: "#64748b" }}>
+      Loading…
+    </div>
+  );
+}
+`,
+  "components/Counter.tsx": `"use client";
+// "use client" — marks this as a Client Component
+// Only Client Components can use useState, useEffect, and browser APIs
+
+import { useState } from "react";
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+      <button
+        onClick={() => setCount((c) => c - 1)}
+        style={{ padding: "0.5rem 1.25rem", fontSize: "1.25rem", cursor: "pointer",
+          borderRadius: "0.375rem", border: "1px solid #cbd5e1", background: "#f8fafc" }}
+      >
+        −
+      </button>
+      <span style={{ fontSize: "2rem", fontWeight: "bold", minWidth: "3rem", textAlign: "center" }}>
+        {count}
+      </span>
+      <button
+        onClick={() => setCount((c) => c + 1)}
+        style={{ padding: "0.5rem 1.25rem", fontSize: "1.25rem", cursor: "pointer",
+          borderRadius: "0.375rem", border: "1px solid #cbd5e1", background: "#f8fafc" }}
+      >
+        +
+      </button>
+    </div>
+  );
+}
+`,
+  "types.ts": `// Shared TypeScript types
+
+export interface PageProps {
+  params: { slug: string };
+  searchParams: Record<string, string | string[] | undefined>;
+}
+
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+`,
+};
+
+const MODULE_FEDERATION_DEFAULT_FILES: Record<string, string> = {
+  "README.md": `# Webpack Module Federation Lab
+
+This lab uses real webpack 5 + webpack-dev-server + Module Federation.
+
+## What is here
+
+- package.json runs three apps together: a host plus two remotes
+- apps/host consumes federated modules from the remotes
+- apps/profile exposes a profile widget
+- apps/checkout exposes a checkout widget
+
+## Good experiments
+
+1. Break one remote URL in apps/host/webpack.config.js and see how the host fails.
+2. Rename an exposed module in a remote without updating the host import.
+3. Stop sharing React as a singleton and inspect the runtime behavior.
+4. Add a new remote by copying an existing app and wiring it into the host.
+
+## Notes
+
+- Ports are injected by the lab runner through environment variables.
+- If you change package.json, restart the webpack lab so dependencies/scripts are re-read.
+`,
+  "package.json": `{
+  "name": "webpack-module-federation-lab",
+  "private": true,
+  "scripts": {
+    "dev": "concurrently -k -n host,profile,checkout -c cyan,magenta,yellow 'npm run dev:host' 'npm run dev:profile' 'npm run dev:checkout'",
+    "dev:host": "webpack serve --config apps/host/webpack.config.js",
+    "dev:profile": "webpack serve --config apps/profile/webpack.config.js",
+    "dev:checkout": "webpack serve --config apps/checkout/webpack.config.js",
+    "build": "npm run build:host && npm run build:profile && npm run build:checkout",
+    "build:host": "webpack --config apps/host/webpack.config.js",
+    "build:profile": "webpack --config apps/profile/webpack.config.js",
+    "build:checkout": "webpack --config apps/checkout/webpack.config.js"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "concurrently": "^9.2.1",
+    "esbuild": "^0.28.0",
+    "esbuild-loader": "^4.4.3",
+    "html-webpack-plugin": "^5.6.7",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2",
+    "webpack-dev-server": "^5.2.3"
+  }
+}
+`,
+  "apps/host/public/index.html": `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Host App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`,
+  "apps/host/src/index.jsx": `import("./bootstrap");
+`,
+  "apps/host/src/bootstrap.jsx": `import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+`,
+  "apps/host/src/App.jsx": `import React, { Suspense } from "react";
+
+const ProfileCard = React.lazy(() => import("profile/ProfileCard"));
+const CheckoutPanel = React.lazy(() => import("checkout/CheckoutPanel"));
+
+function RemoteBoundary({ title, children }) {
+  return (
+    <div
+      style={{
+        border: "1px solid #cbd5e1",
+        borderRadius: "0.75rem",
+        padding: "1rem",
+        background: "#fff",
+      }}
+    >
+      <div style={{ fontSize: "0.8rem", color: "#64748b", marginBottom: "0.75rem" }}>
+        {title}
+      </div>
+      <Suspense fallback={<p style={{ color: "#64748b" }}>Loading remote...</p>}>
+        {children}
+      </Suspense>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <main
+      style={{
+        minHeight: "100vh",
+        margin: 0,
+        padding: "2rem",
+        background: "linear-gradient(135deg, #e0f2fe 0%, #f8fafc 50%, #fef3c7 100%)",
+        fontFamily: "ui-sans-serif, system-ui, sans-serif",
+      }}
+    >
+      <div style={{ maxWidth: "1100px", margin: "0 auto" }}>
+        <div style={{ marginBottom: "1.5rem" }}>
+          <p style={{ margin: 0, color: "#0369a1", fontSize: "0.8rem", letterSpacing: "0.08em", textTransform: "uppercase" }}>
+            Webpack 5 Host
+          </p>
+          <h1 style={{ margin: "0.35rem 0 0", fontSize: "2rem", color: "#0f172a" }}>
+            Module Federation Playground
+          </h1>
+          <p style={{ color: "#475569", maxWidth: "52rem" }}>
+            The host renders two independently built remotes. Change a remote expose, shared dependency,
+            or URL in the webpack configs to see the same failures you would hit in a real setup.
+          </p>
+        </div>
+
+        <section
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
+            gap: "1rem",
+          }}
+        >
+          <RemoteBoundary title="Remote: profile/ProfileCard">
+            <ProfileCard />
+          </RemoteBoundary>
+          <RemoteBoundary title="Remote: checkout/CheckoutPanel">
+            <CheckoutPanel />
+          </RemoteBoundary>
+        </section>
+      </div>
+    </main>
+  );
+}
+`,
+  "apps/host/webpack.config.js": `const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { ModuleFederationPlugin } = require("webpack").container;
+
+const hostPort = Number(process.env.HOST_PORT || 3100);
+const profilePort = Number(process.env.PROFILE_PORT || 3101);
+const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
+
+module.exports = {
+  mode: "development",
+  entry: path.resolve(__dirname, "./src/index.jsx"),
+  output: {
+    publicPath: "http://localhost:" + hostPort + "/",
+    clean: true,
+  },
+  resolve: {
+    extensions: [".js", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "esbuild-loader",
+          options: {
+            loader: "jsx",
+            jsx: "automatic",
+            target: "es2020",
+          },
+        },
+      },
+    ],
+  },
+  devServer: {
+    port: hostPort,
+    historyApiFallback: true,
+    hot: true,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "host",
+      remotes: {
+        profile: "profile@http://localhost:" + profilePort + "/remoteEntry.js",
+        checkout: "checkout@http://localhost:" + checkoutPort + "/remoteEntry.js",
+      },
+      shared: {
+        react: { singleton: true, requiredVersion: false },
+        "react-dom": { singleton: true, requiredVersion: false },
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "./public/index.html"),
+    }),
+  ],
+};
+`,
+  "apps/profile/public/index.html": `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Profile Remote</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`,
+  "apps/profile/src/index.jsx": `import("./bootstrap");
+`,
+  "apps/profile/src/bootstrap.jsx": `import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+`,
+  "apps/profile/src/App.jsx": `import React from "react";
+import ProfileCard from "./ProfileCard";
+
+export default function App() {
+  return (
+    <main style={{ padding: "2rem", fontFamily: "ui-sans-serif, system-ui, sans-serif", background: "#f8fafc", minHeight: "100vh" }}>
+      <p style={{ margin: 0, color: "#7c3aed", fontSize: "0.8rem", letterSpacing: "0.08em", textTransform: "uppercase" }}>
+        Remote App
+      </p>
+      <h1 style={{ margin: "0.35rem 0 1rem", color: "#1e293b" }}>Profile</h1>
+      <ProfileCard />
+    </main>
+  );
+}
+`,
+  "apps/profile/src/ProfileCard.jsx": `import React from "react";
+
+export default function ProfileCard() {
+  return (
+    <section>
+      <h2 style={{ marginTop: 0, color: "#1e293b" }}>Federated profile card</h2>
+      <p style={{ color: "#475569" }}>
+        This component is exposed from the profile remote and consumed by the host at runtime.
+      </p>
+      <dl style={{ display: "grid", gridTemplateColumns: "max-content 1fr", gap: "0.5rem 1rem", margin: 0 }}>
+        <dt style={{ color: "#64748b" }}>Owner</dt>
+        <dd style={{ margin: 0, color: "#0f172a" }}>Composable Platform Team</dd>
+        <dt style={{ color: "#64748b" }}>Build</dt>
+        <dd style={{ margin: 0, color: "#0f172a" }}>profile/ProfileCard</dd>
+      </dl>
+    </section>
+  );
+}
+`,
+  "apps/profile/webpack.config.js": `const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { ModuleFederationPlugin } = require("webpack").container;
+
+const profilePort = Number(process.env.PROFILE_PORT || 3101);
+
+module.exports = {
+  mode: "development",
+  entry: path.resolve(__dirname, "./src/index.jsx"),
+  output: {
+    publicPath: "http://localhost:" + profilePort + "/",
+    clean: true,
+  },
+  resolve: {
+    extensions: [".js", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "esbuild-loader",
+          options: {
+            loader: "jsx",
+            jsx: "automatic",
+            target: "es2020",
+          },
+        },
+      },
+    ],
+  },
+  devServer: {
+    port: profilePort,
+    hot: true,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "profile",
+      filename: "remoteEntry.js",
+      exposes: {
+        "./ProfileCard": path.resolve(__dirname, "./src/ProfileCard.jsx"),
+      },
+      shared: {
+        react: { singleton: true, requiredVersion: false },
+        "react-dom": { singleton: true, requiredVersion: false },
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "./public/index.html"),
+    }),
+  ],
+};
+`,
+  "apps/checkout/public/index.html": `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Checkout Remote</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`,
+  "apps/checkout/src/index.jsx": `import("./bootstrap");
+`,
+  "apps/checkout/src/bootstrap.jsx": `import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+`,
+  "apps/checkout/src/App.jsx": `import React from "react";
+import CheckoutPanel from "./CheckoutPanel";
+
+export default function App() {
+  return (
+    <main style={{ padding: "2rem", fontFamily: "ui-sans-serif, system-ui, sans-serif", background: "#fff7ed", minHeight: "100vh" }}>
+      <p style={{ margin: 0, color: "#ea580c", fontSize: "0.8rem", letterSpacing: "0.08em", textTransform: "uppercase" }}>
+        Remote App
+      </p>
+      <h1 style={{ margin: "0.35rem 0 1rem", color: "#7c2d12" }}>Checkout</h1>
+      <CheckoutPanel />
+    </main>
+  );
+}
+`,
+  "apps/checkout/src/CheckoutPanel.jsx": `import React from "react";
+
+export default function CheckoutPanel() {
+  return (
+    <section>
+      <h2 style={{ marginTop: 0, color: "#7c2d12" }}>Federated checkout panel</h2>
+      <p style={{ color: "#9a3412" }}>
+        This remote can evolve independently from the host as long as the public module contract stays stable.
+      </p>
+      <button
+        type="button"
+        style={{
+          border: 0,
+          borderRadius: "999px",
+          background: "#fb923c",
+          color: "#431407",
+          padding: "0.65rem 1rem",
+          fontWeight: 700,
+          cursor: "pointer",
+        }}
+      >
+        Ship order
+      </button>
+    </section>
+  );
+}
+`,
+  "apps/checkout/webpack.config.js": `const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { ModuleFederationPlugin } = require("webpack").container;
+
+const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
+
+module.exports = {
+  mode: "development",
+  entry: path.resolve(__dirname, "./src/index.jsx"),
+  output: {
+    publicPath: "http://localhost:" + checkoutPort + "/",
+    clean: true,
+  },
+  resolve: {
+    extensions: [".js", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "esbuild-loader",
+          options: {
+            loader: "jsx",
+            jsx: "automatic",
+            target: "es2020",
+          },
+        },
+      },
+    ],
+  },
+  devServer: {
+    port: checkoutPort,
+    hot: true,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "checkout",
+      filename: "remoteEntry.js",
+      exposes: {
+        "./CheckoutPanel": path.resolve(__dirname, "./src/CheckoutPanel.jsx"),
+      },
+      shared: {
+        react: { singleton: true, requiredVersion: false },
+        "react-dom": { singleton: true, requiredVersion: false },
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "./public/index.html"),
+    }),
+  ],
+};
+`,
+};
+
+// ── Lab workspace constructors ────────────────────────────────────────────────
+
+export const DEFAULT_REACT_LAB: FrontendLabWorkspace = {
+  version: 1,
+  label: "React Lab",
+  type: "react",
+  activeFile: "App.tsx",
+  files: REACT_DEFAULT_FILES,
+};
+
+export const DEFAULT_NEXTJS_LAB: FrontendLabWorkspace = {
+  version: 1,
+  label: "Next.js Lab",
+  type: "nextjs",
+  activeFile: "app/page.tsx",
+  files: NEXTJS_DEFAULT_FILES,
+};
+
+export const DEFAULT_MODULE_FEDERATION_LAB: FrontendLabWorkspace = {
+  version: 1,
+  label: "Webpack Module Federation Lab",
+  type: "module-federation",
+  activeFile: "apps/host/src/App.jsx",
+  files: MODULE_FEDERATION_DEFAULT_FILES,
+};
+
+export function defaultForType(type: FrontendLabType): FrontendLabWorkspace {
+  if (type === "nextjs") return DEFAULT_NEXTJS_LAB;
+  if (type === "module-federation") return DEFAULT_MODULE_FEDERATION_LAB;
+  return DEFAULT_REACT_LAB;
+}
+
+export function cloneFrontendLabWorkspace(
+  workspace?: FrontendLabWorkspace | null,
+  type?: FrontendLabType,
+): FrontendLabWorkspace {
+  const resolvedType = workspace?.type ?? type ?? "react";
+  const defaults = defaultForType(resolvedType);
+  const source = workspace ?? defaults;
+  const files =
+    source.files && Object.keys(source.files).length > 0
+      ? { ...source.files }
+      : { ...defaults.files };
+  const activeFile = files[source.activeFile]
+    ? source.activeFile
+    : (Object.keys(files)[0] ?? defaults.activeFile);
+
+  return {
+    version: 1,
+    label: source.label?.trim() || defaults.label,
+    type: resolvedType,
+    activeFile,
+    files,
+  };
+}
+
+export function serializeFrontendLabWorkspace(
+  workspace: FrontendLabWorkspace,
+): string {
+  return JSON.stringify(cloneFrontendLabWorkspace(workspace), null, 2);
+}
+
+export function parseFrontendLabWorkspace(
+  raw: string,
+): FrontendLabWorkspace | null {
+  try {
+    const parsed = JSON.parse(raw) as Partial<FrontendLabWorkspace> & {
+      files?: Record<string, unknown>;
+    };
+    if (!parsed || typeof parsed !== "object") return null;
+    if (!parsed.files || typeof parsed.files !== "object") return null;
+
+    const files = Object.fromEntries(
+      Object.entries(parsed.files).filter(
+        (e): e is [string, string] => typeof e[1] === "string",
+      ),
+    );
+    if (Object.keys(files).length === 0) return null;
+
+    const type: FrontendLabType =
+      parsed.type === "nextjs"
+        ? "nextjs"
+        : parsed.type === "module-federation"
+          ? "module-federation"
+          : "react";
+
+    return cloneFrontendLabWorkspace({
+      version: 1,
+      type,
+      label:
+        typeof parsed.label === "string" && parsed.label.trim()
+          ? parsed.label.trim()
+          : defaultForType(type).label,
+      activeFile:
+        typeof parsed.activeFile === "string"
+          ? parsed.activeFile
+          : defaultForType(type).activeFile,
+      files,
+    });
+  } catch {
+    return null;
+  }
+}
+
+/** Returns the canonical entry file for "Run" → preview. */
+export function getEntryFile(workspace: FrontendLabWorkspace): string {
+  if (workspace.type === "nextjs") {
+    return workspace.files["app/page.tsx"]
+      ? "app/page.tsx"
+      : Object.keys(workspace.files)[0];
+  }
+  if (workspace.type === "module-federation") {
+    return workspace.files["apps/host/src/App.jsx"]
+      ? "apps/host/src/App.jsx"
+      : Object.keys(workspace.files)[0];
+  }
+  return workspace.files["App.tsx"]
+    ? "App.tsx"
+    : Object.keys(workspace.files)[0];
+}
+
+/** Preferred display order for the file tree. */
+export function getFrontendLabFileOrder(
+  workspace: FrontendLabWorkspace,
+): string[] {
+  if (workspace.type === "module-federation") {
+    const preferred = ["README.md", "package.json"];
+    const rest = Object.keys(workspace.files)
+      .filter((name) => !preferred.includes(name))
+      .sort((a, b) => {
+        const ad = a.split("/").length;
+        const bd = b.split("/").length;
+        return ad !== bd ? ad - bd : a.localeCompare(b);
+      });
+    return preferred.filter((name) => workspace.files[name]).concat(rest);
+  }
+  const allFiles = Object.keys(workspace.files).sort((a, b) => {
+    // Sort by folder depth first, then alphabetically
+    const ad = a.split("/").length;
+    const bd = b.split("/").length;
+    return ad !== bd ? ad - bd : a.localeCompare(b);
+  });
+  return allFiles;
+}
+
+// ── Preview HTML generator ────────────────────────────────────────────────────
+
+/**
+ * Resolves which page.tsx file corresponds to a Next.js route path.
+ * Returns null if no matching file exists in `files`.
+ */
+export function resolveNextjsEntry(
+  files: Record<string, string>,
+  routePath: string,
+): string | null {
+  const segments = routePath.replace(/^\//, "").split("/").filter(Boolean);
+  const base =
+    segments.length === 0 ? "app/page" : `app/${segments.join("/")}/page`;
+  for (const ext of [".tsx", ".ts", ".jsx", ".js"]) {
+    if (files[base + ext] !== undefined) return base + ext;
+  }
+  return null;
+}
+
+/**
+ * Generates a self-contained HTML page for the preview iframe.
+ *
+ * Approach: loads React 18 UMD + Babel standalone from CDN, runs a
+ * custom module system built on top of Babel's CJS transform plugin,
+ * then renders the default export from `entryFile`.
+ *
+ * CDN URLs are version-pinned so the preview is reproducible.
+ */
+export function generatePreviewHTML(
+  files: Record<string, string>,
+  entryFile: string,
+  sandboxUrl?: string,
+  isNextjs?: boolean,
+): string {
+  const filesJSON = JSON.stringify(files);
+  const entryJSON = JSON.stringify(entryFile);
+  const sandboxJSON = JSON.stringify(sandboxUrl ?? "");
+  const isNextjsJSON = isNextjs ? "true" : "false";
+  // _i breaks up the 'import' keyword so Vite/Babel doesn't misparse
+  // the template literal below as containing real module import declarations
+  const _i = "import";
+
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script>window.__F__=${filesJSON};window.__E__=${entryJSON};window.SANDBOX_URL=${sandboxJSON};window.__NX__=${isNextjsJSON};</script>
+<script src="https://unpkg.com/@babel/standalone@7.26.10/babel.min.js"></script>
+<style>
+*{box-sizing:border-box}
+body{margin:0;background:#fff;font-family:system-ui,sans-serif}
+#__err{display:none;position:fixed;bottom:0;left:0;right:0;padding:0.75rem 1rem;background:#fef2f2;color:#991b1b;font:12px/1.5 monospace;white-space:pre-wrap;border-top:2px solid #fca5a5;max-height:50%;overflow:auto;z-index:9999}
+</style>
+</head>
+<body>
+<div id="root"></div>
+<div id="__err"></div>
+<script type="module">
+${_i} React from 'https://esm.sh/react@19.1.0';
+${_i} * as ReactDOM from 'https://esm.sh/react-dom@19.1.0/client?deps=react@19.1.0';
+window.React = React;
+window.ReactDOM = ReactDOM;
+(function(){
+  var files=window.__F__,entry=window.__E__,reg={};
+  function norm(from,id){
+    if(id==='react'||id==='react/jsx-runtime'||id==='react/jsx-dev-runtime')return'__react__';
+    if(id==='react-dom'||id==='react-dom/server')return'__reactdom__';
+    if(id==='react-dom/client')return'__reactdomclient__';
+    if(!id.startsWith('.')){return'__ext__:'+id;}
+    var dir=from.includes('/')?from.slice(0,from.lastIndexOf('/')+1):'';
+    var parts=(dir+id).split('/').reduce(function(a,p){
+      if(p==='..')a.pop();else if(p&&p!=='.')a.push(p);return a;
+    },[]);
+    var base=parts.join('/');
+    var exts=['','.tsx','.ts','.jsx','.js'];
+    for(var i=0;i<exts.length;i++){if(files[base+exts[i]]!=null)return base+exts[i];}
+    return base;
+  }
+  function makeReq(from){
+    return function(id){
+      if(id==='react'||id==='react/jsx-runtime'||id==='react/jsx-dev-runtime')return window.React;
+      if(id==='react-dom/client')return{createRoot:window.ReactDOM.createRoot.bind(window.ReactDOM)};
+      if(id==='react-dom')return window.ReactDOM;
+      var key=norm(from,id);
+      if(key.startsWith('__ext__:'))return{};
+      if(reg[key])return reg[key].exports;
+      for(var e of['.tsx','.ts','.jsx','.js']){if(reg[key+e])return reg[key+e].exports;}
+      console.warn('Module not found:',id,'from',from);return{};
+    };
+  }
+  function loadMod(name){
+    if(reg[name])return;
+    var src=files[name];if(src==null)return;
+    var m={exports:{}};
+    reg[name]=m;
+    try{
+      var out=Babel.transform(src,{
+        presets:[['react',{runtime:'classic'}],['typescript',{allExtensions:true,isTSX:true}]],
+        plugins:['transform-modules-commonjs','transform-dynamic-import'],
+        filename:name,sourceType:'module'
+      }).code;
+      (new Function('require','module','exports',out))(makeReq(name),m,m.exports);
+    }catch(e){throw new Error(name+': '+e.message);}
+  }
+  function deps(name){
+    var src=files[name]||'',re=/from\\s+['""]([^'"]+)['"]/g,d=[],m;
+    while((m=re.exec(src))!==null){
+      var k=norm(name,m[1]);
+      if(k&&!k.startsWith('__')&&files[k])d.push(k);
+    }
+    return d;
+  }
+  var vis=new Set(),order=[];
+  function visit(n){if(vis.has(n))return;vis.add(n);deps(n).forEach(visit);order.push(n);}
+  Object.keys(files).forEach(visit);
+  function showErr(msg){
+    var el=document.getElementById('__err');
+    el.style.display='block';el.innerText=msg;
+    try{parent.postMessage({type:'rlab-err',error:msg},'*');}catch(e){}
+  }
+  window.onerror=function(msg,s,l,c,err){showErr(err?err.message+'\\n'+(err.stack||''):String(msg));return true;};
+  window.addEventListener('unhandledrejection',function(e){showErr(e.reason&&e.reason.message?e.reason.message:String(e.reason));});
+  try{
+    order.forEach(loadMod);
+    var em=reg[entry];
+    if(!em)throw new Error('Entry not found: '+entry);
+    var Comp=em.exports.default;
+    if(typeof Comp!=='function')throw new Error('No default export (function/component) in '+entry);
+    // Expose a navigate helper so in-preview code can trigger URL bar changes:
+    //   window.__nxNavigate('/dashboard')
+    window.__nxNavigate=function(to){try{parent.postMessage({type:'rlab-nav',to:to},'*');}catch(e){}};
+    var pageEl=React.createElement(Comp,null);
+    // In Next.js mode: wrap the page in app/layout.tsx if it exists
+    if(window.__NX__){
+      var lk=null;
+      for(var _le of['app/layout.tsx','app/layout.ts','app/layout.jsx','app/layout.js']){
+        if(reg[_le]){lk=_le;break;}
+      }
+      if(lk&&typeof reg[lk].exports.default==='function'){
+        pageEl=React.createElement(reg[lk].exports.default,null,pageEl);
+      }
+    }
+    ReactDOM.createRoot(document.getElementById('root')).render(
+      React.createElement(React.StrictMode,null,pageEl)
+    );
+    try{parent.postMessage({type:'rlab-ready'},'*');}catch(e){}
+  }catch(err){showErr(err.message+(err.stack?'\\n\\n'+err.stack:''));}
+})();
+</script>
+</body>
+</html>`;
+}