create-interview-cockpit 0.14.0 → 0.16.0

package/template/client/src/browserSecurityTemplates.ts

@@ -0,0 +1,3242 @@
+import {
+  cloneFrontendLabWorkspace,
+  DEFAULT_MODULE_FEDERATION_LAB,
+} from "./reactLab";
+
+export interface BrowserSecurityTemplate {
+  id:
+    | "csp"
+    | "xss"
+    | "csrf"
+    | "mfe-csp-xss"
+    | "mfe-build-serve"
+    | "mfe-ssr-nextjs"
+    | "mfe-telemetry";
+  label: string;
+  description: string;
+  serverCode: string;
+  clientCode: string;
+  clientType?: "script" | "module-federation";
+  reactFiles?: Record<string, string>;
+  reactActiveFile?: string;
+}
+
+const MFE_BROWSER_SECURITY_WORKSPACE = (() => {
+  const workspace = cloneFrontendLabWorkspace(
+    DEFAULT_MODULE_FEDERATION_LAB,
+    "module-federation",
+  );
+
+  return {
+    ...workspace,
+    label: "Webpack MF - CSP and XSS Boundaries",
+    activeFile: "apps/host/src/App.jsx",
+    files: {
+      ...workspace.files,
+      "README.md": `# Module Federation Security Lab
+
+This workspace demonstrates two security ideas in a federated frontend:
+
+1. **CSP for Module Federation**
+The host shell downloads remoteEntry.js files from other origins. That means the host CSP must explicitly allow each trusted remote origin in script-src.
+
+2. **XSS blast radius across remotes**
+If any remote renders attacker-controlled HTML with dangerouslySetInnerHTML, that script runs in the same page as the host shell. A single vulnerable remote can compromise the whole composed UI.
+
+## What to inspect
+
+- apps/host/webpack.config.js - CSP allowlist for remote origins
+- apps/host/src/App.jsx - host passes one payload to both remotes
+- apps/profile/src/ProfileCard.jsx - safe remote renders payload as text
+- apps/checkout/src/CheckoutPanel.jsx - unsafe remote injects HTML directly
+
+## Suggested experiments
+
+1. Start webpack and switch the payload from safe text to attacker HTML.
+2. See the safe remote display the payload literally while the unsafe remote executes it.
+3. Remove one remote origin from script-src in apps/host/webpack.config.js and rerun webpack.
+4. Add a new remote and notice that CSP must be updated before the host can trust it.
+`,
+      "apps/host/src/App.jsx": `import React, { Suspense, useMemo, useState } from "react";
+import { makeInspectableLazy } from "../../shared/mfInspector";
+
+const ProfileCard = React.lazy(
+  makeInspectableLazy(
+    "profile/ProfileCard",
+    () => import("profile/ProfileCard"),
+    () => import("profile/InspectorBridge"),
+  ),
+);
+const CheckoutPanel = React.lazy(
+  makeInspectableLazy(
+    "checkout/CheckoutPanel",
+    () => import("checkout/CheckoutPanel"),
+    () => import("checkout/InspectorBridge"),
+  ),
+);
+
+const SAFE_PROMO = "Spring release: 20% off for signed-in teams.";
+const ATTACKER_PROMO =
+  '<img src="x" onerror="document.getElementById(\\'mf-xss-status\\').textContent=\\'XSS executed inside the unsafe checkout remote\\';document.getElementById(\\'mf-xss-status\\').style.color=\\'#dc2626\\';document.getElementById(\\'mf-xss-status\\').style.fontWeight=\\'700\\';" />';
+
+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() {
+  const [variant, setVariant] = useState("safe");
+
+  const promoHtml = useMemo(
+    () => (variant === "attacker" ? ATTACKER_PROMO : SAFE_PROMO),
+    [variant],
+  );
+
+  const resetStatus = () => {
+    const el = document.getElementById("mf-xss-status");
+    if (!el) return;
+    el.textContent = "No XSS executed yet.";
+    el.style.color = "#0f766e";
+    el.style.fontWeight = "600";
+  };
+
+  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: "1180px", 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" }}>
+            CSP and XSS in a federated shell
+          </h1>
+          <p style={{ color: "#475569", maxWidth: "56rem" }}>
+            The host allowlists remote origins in CSP so Module Federation can load
+            trusted remotes. It then sends the same marketing payload to two remotes:
+            one renders it safely as text, the other renders it as raw HTML.
+          </p>
+        </div>
+
+        <section
+          style={{
+            display: "grid",
+            gridTemplateColumns: "1.15fr 1fr",
+            gap: "1rem",
+            marginBottom: "1rem",
+          }}
+        >
+          <div
+            style={{
+              background: "rgba(255,255,255,0.92)",
+              border: "1px solid #bfdbfe",
+              borderRadius: "1rem",
+              padding: "1rem",
+            }}
+          >
+            <h2 style={{ marginTop: 0, color: "#0f172a", fontSize: "1rem" }}>
+              Host controls
+            </h2>
+            <p style={{ marginTop: 0, color: "#475569", fontSize: "0.9rem" }}>
+              Toggle the same payload between safe text and attacker HTML.
+              If the unsafe remote injects it with <code>dangerouslySetInnerHTML</code>,
+              the payload executes in the host page.
+            </p>
+            <div style={{ display: "flex", gap: "0.75rem", marginBottom: "0.75rem" }}>
+              <button
+                type="button"
+                onClick={() => {
+                  resetStatus();
+                  setVariant("safe");
+                }}
+                style={{
+                  border: 0,
+                  borderRadius: "999px",
+                  background: variant === "safe" ? "#0f766e" : "#cbd5e1",
+                  color: variant === "safe" ? "#ecfeff" : "#0f172a",
+                  padding: "0.65rem 1rem",
+                  fontWeight: 700,
+                  cursor: "pointer",
+                }}
+              >
+                Use safe text
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  resetStatus();
+                  setVariant("attacker");
+                }}
+                style={{
+                  border: 0,
+                  borderRadius: "999px",
+                  background: variant === "attacker" ? "#b91c1c" : "#fecaca",
+                  color: variant === "attacker" ? "#fff7ed" : "#7f1d1d",
+                  padding: "0.65rem 1rem",
+                  fontWeight: 700,
+                  cursor: "pointer",
+                }}
+              >
+                Use attacker HTML
+              </button>
+            </div>
+
+            <p id="mf-xss-status" style={{ margin: "0 0 0.75rem", color: "#0f766e", fontWeight: 600 }}>
+              No XSS executed yet.
+            </p>
+
+            <pre
+              style={{
+                margin: 0,
+                padding: "0.9rem",
+                borderRadius: "0.75rem",
+                background: "#0f172a",
+                color: "#e2e8f0",
+                fontSize: "0.78rem",
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-word",
+              }}
+            >
+              {promoHtml}
+            </pre>
+          </div>
+
+          <div
+            style={{
+              background: "rgba(255,255,255,0.92)",
+              border: "1px solid #fde68a",
+              borderRadius: "1rem",
+              padding: "1rem",
+            }}
+          >
+            <h2 style={{ marginTop: 0, color: "#0f172a", fontSize: "1rem" }}>
+              CSP angle
+            </h2>
+            <p style={{ marginTop: 0, color: "#475569", fontSize: "0.9rem" }}>
+              The host page sends a CSP header from <code>apps/host/webpack.config.js</code>.
+              It allows only the host plus the trusted remote origins in <code>script-src</code>.
+            </p>
+            <ol style={{ margin: 0, paddingLeft: "1.2rem", color: "#334155", fontSize: "0.9rem" }}>
+              <li>Remote entries still count as remote scripts.</li>
+              <li>Adding a new remote means updating the CSP allowlist.</li>
+              <li>XSS inside any allowed remote still runs in the shared host page.</li>
+            </ol>
+          </div>
+        </section>
+
+        <section
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
+            gap: "1rem",
+          }}
+        >
+          <RemoteBoundary title="profile/ProfileCard - safe remote using normal React text rendering">
+            <ProfileCard promoHtml={promoHtml} />
+          </RemoteBoundary>
+          <RemoteBoundary title="checkout/CheckoutPanel - unsafe remote using dangerouslySetInnerHTML">
+            <CheckoutPanel promoHtml={promoHtml} />
+          </RemoteBoundary>
+        </section>
+      </div>
+    </main>
+  );
+}
+`,
+      "apps/host/webpack.config.js": `const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { ModuleFederationPlugin } = webpack.container;
+const packageJson = require("./package.json");
+const { createSharedConfig } = require("../shared/buildSharedConfig");
+
+const hostPort = Number(process.env.HOST_PORT || 3100);
+const profilePort = Number(process.env.PROFILE_PORT || 3101);
+const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
+const sharedConfig = createSharedConfig(packageJson);
+const remoteConfig = {
+  profile: "profile@http://localhost:" + profilePort + "/remoteEntry.js",
+  checkout: "checkout@http://localhost:" + checkoutPort + "/remoteEntry.js",
+};
+const inspectorConfig = {
+  app: "host",
+  remotes: remoteConfig,
+  shared: sharedConfig,
+};
+
+module.exports = {
+  mode: "development",
+  devtool: "source-map",
+  entry: path.resolve(__dirname, "./src/index.jsx"),
+  output: {
+    path: path.resolve(__dirname, "./dist"),
+    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": "*",
+      // Module Federation still downloads remoteEntry.js from other origins.
+      // CSP must allow every trusted remote origin in script-src.
+      "Content-Security-Policy": [
+        "default-src 'self'",
+        "script-src 'self' http://localhost:" + profilePort + " http://localhost:" + checkoutPort,
+        "style-src 'self' 'unsafe-inline'",
+        "img-src 'self' data:",
+        "font-src 'self' data:",
+        "connect-src 'self' http://localhost:" + hostPort + " ws://localhost:" + hostPort + " http://localhost:" + profilePort + " ws://localhost:" + profilePort + " http://localhost:" + checkoutPort + " ws://localhost:" + checkoutPort,
+        "object-src 'none'",
+        "base-uri 'self'",
+        "frame-ancestors 'self' http://localhost:5173 http://127.0.0.1:5173",
+      ].join("; "),
+    },
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      __MF_INSPECTOR_APP__: JSON.stringify("host"),
+      __MF_INSPECTOR_SANDBOX_ID__: JSON.stringify(process.env.MF_SANDBOX_ID || ""),
+      __MF_INSPECTOR_DECLARED_CONFIG__: JSON.stringify(inspectorConfig),
+    }),
+    new ModuleFederationPlugin({
+      name: "host",
+      remotes: remoteConfig,
+      shared: sharedConfig,
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "./public/index.html"),
+    }),
+  ],
+};
+`,
+      "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 promoHtml="Spring release: 20% off for signed-in teams." />
+    </main>
+  );
+}
+`,
+      "apps/profile/src/ProfileCard.jsx": `import React from "react";
+
+export default function ProfileCard({ promoHtml = "" }) {
+  return (
+    <section>
+      <h2 style={{ marginTop: 0, color: "#1e293b" }}>Safe federated profile card</h2>
+      <p style={{ color: "#475569" }}>
+        This remote treats host-provided markup as plain text. React escapes it,
+        so attacker-controlled HTML never becomes executable DOM here.
+      </p>
+      <div
+        style={{
+          borderRadius: "0.75rem",
+          border: "1px solid #cbd5e1",
+          padding: "0.85rem",
+          background: "#f8fafc",
+          color: "#0f172a",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
+        }}
+      >
+        {promoHtml}
+      </div>
+    </section>
+  );
+}
+`,
+      "apps/profile/webpack.config.js": `const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { ModuleFederationPlugin } = webpack.container;
+const packageJson = require("./package.json");
+const { createSharedConfig } = require("../shared/buildSharedConfig");
+
+const profilePort = Number(process.env.PROFILE_PORT || 3101);
+const sharedConfig = createSharedConfig(packageJson);
+const exposeConfig = {
+  "./ProfileCard": path.resolve(__dirname, "./src/ProfileCard.jsx"),
+  "./InspectorBridge": path.resolve(__dirname, "./src/inspectorBridge.js"),
+};
+const inspectorConfig = {
+  app: "profile",
+  exposes: Object.keys(exposeConfig),
+  shared: sharedConfig,
+};
+
+module.exports = {
+  mode: "development",
+  devtool: "source-map",
+  entry: path.resolve(__dirname, "./src/index.jsx"),
+  output: {
+    path: path.resolve(__dirname, "./dist"),
+    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,
+    historyApiFallback: true,
+    hot: true,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      __MF_INSPECTOR_APP__: JSON.stringify("profile"),
+      __MF_INSPECTOR_SANDBOX_ID__: JSON.stringify(process.env.MF_SANDBOX_ID || ""),
+      __MF_INSPECTOR_DECLARED_CONFIG__: JSON.stringify(inspectorConfig),
+    }),
+    new ModuleFederationPlugin({
+      name: "profile",
+      filename: "remoteEntry.js",
+      exposes: exposeConfig,
+      shared: sharedConfig,
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "./public/index.html"),
+    }),
+  ],
+};
+`,
+      "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 promoHtml='Spring release: 20% off for signed-in teams.' />
+    </main>
+  );
+}
+`,
+      "apps/checkout/src/CheckoutPanel.jsx": `import React from "react";
+
+export default function CheckoutPanel({ promoHtml = "" }) {
+  return (
+    <section>
+      <h2 style={{ marginTop: 0, color: "#7c2d12" }}>Unsafe federated checkout panel</h2>
+      <p style={{ color: "#9a3412" }}>
+        This remote uses <code>dangerouslySetInnerHTML</code>. If the host or any
+        upstream service passes attacker-controlled HTML, the remote executes it
+        in the same page as the host shell.
+      </p>
+      <div
+        style={{
+          borderRadius: "0.75rem",
+          border: "1px solid #fdba74",
+          padding: "0.85rem",
+          background: "#fff7ed",
+          color: "#7c2d12",
+          minHeight: "3.5rem",
+        }}
+        dangerouslySetInnerHTML={{ __html: promoHtml }}
+      />
+    </section>
+  );
+}
+`,
+      "apps/checkout/webpack.config.js": `const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { ModuleFederationPlugin } = webpack.container;
+const packageJson = require("./package.json");
+const { createSharedConfig } = require("../shared/buildSharedConfig");
+
+const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
+const sharedConfig = createSharedConfig(packageJson);
+const exposeConfig = {
+  "./CheckoutPanel": path.resolve(__dirname, "./src/CheckoutPanel.jsx"),
+  "./InspectorBridge": path.resolve(__dirname, "./src/inspectorBridge.js"),
+};
+const inspectorConfig = {
+  app: "checkout",
+  exposes: Object.keys(exposeConfig),
+  shared: sharedConfig,
+};
+
+module.exports = {
+  mode: "development",
+  devtool: "source-map",
+  entry: path.resolve(__dirname, "./src/index.jsx"),
+  output: {
+    path: path.resolve(__dirname, "./dist"),
+    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,
+    historyApiFallback: true,
+    hot: true,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      __MF_INSPECTOR_APP__: JSON.stringify("checkout"),
+      __MF_INSPECTOR_SANDBOX_ID__: JSON.stringify(process.env.MF_SANDBOX_ID || ""),
+      __MF_INSPECTOR_DECLARED_CONFIG__: JSON.stringify(inspectorConfig),
+    }),
+    new ModuleFederationPlugin({
+      name: "checkout",
+      filename: "remoteEntry.js",
+      exposes: exposeConfig,
+      shared: sharedConfig,
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "./public/index.html"),
+    }),
+  ],
+};
+`,
+    },
+  };
+})();
+
+export const BROWSER_SECURITY_TEMPLATES: BrowserSecurityTemplate[] = [
+  {
+    id: "csp",
+    label: "CSP Inline Script Boundary",
+    description:
+      "Compare the same server-rendered page with and without a Content-Security-Policy header.",
+    serverCode: `import express from 'express';
+
+const app = express();
+
+app.use((req, res, next) => {
+  const origin = typeof req.headers.origin === 'string' ? req.headers.origin : '';
+  if (origin) {
+    res.setHeader('Access-Control-Allow-Origin', origin);
+    res.setHeader('Vary', 'Origin');
+    res.setHeader('Access-Control-Allow-Credentials', 'true');
+  } else {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+  }
+  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, X-CSRF-Token');
+  if (req.method === 'OPTIONS') {
+    res.sendStatus(204);
+    return;
+  }
+  next();
+});
+
+function renderPage(mode) {
+  const secure = mode === 'safe';
+  const title = secure ? 'CSP enabled' : 'No CSP header';
+  const intro = secure
+    ? 'The server still returns an inline <script>, but the browser should refuse to run it.'
+    : 'The same inline <script> is returned without CSP, so the browser will execute it.';
+  const policy = secure
+    ? "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
+    : 'No Content-Security-Policy header returned';
+
+  return [
+    '<!doctype html>',
+    '<html>',
+    '<head>',
+    '  <meta charset="utf-8" />',
+    '  <title>CSP demo</title>',
+    '  <style>',
+    '    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 18px; margin: 0; }',
+    '    .panel { background: #111827; border: 1px solid #334155; border-radius: 12px; padding: 16px; }',
+    '    code { display: block; margin-top: 12px; color: #7dd3fc; white-space: pre-wrap; }',
+    '  </style>',
+    '</head>',
+    '<body>',
+    '  <div class="panel">',
+    '    <h1>' + title + '</h1>',
+    '    <p>' + intro + '</p>',
+    '    <p id="status" data-state="blocked">Inline script has not run.</p>',
+    '    <code>' + policy + '</code>',
+    '  </div>',
+    '  <script>',
+    "    const status = document.getElementById('status');",
+    "    status.textContent = 'Inline script executed. The page is vulnerable to injected scripts.';",
+    "    status.dataset.state = 'executed';",
+    "    status.style.color = '#fca5a5';",
+    '  </script>',
+    '</body>',
+    '</html>',
+  ].join('\\n');
+}
+
+app.get('/lab/csp/:mode', (req, res) => {
+  const mode = req.params.mode === 'safe' ? 'safe' : 'unsafe';
+  if (mode === 'safe') {
+    res.setHeader(
+      'Content-Security-Policy',
+      "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'",
+    );
+  }
+  res.send(renderPage(mode));
+});
+
+app.get('/api/csp/meta/:mode', (req, res) => {
+  const mode = req.params.mode === 'safe' ? 'safe' : 'unsafe';
+  res.json({
+    mode,
+    header:
+      mode === 'safe'
+        ? "Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
+        : 'No CSP header',
+    expected:
+      mode === 'safe'
+        ? 'The inline script is present in the HTML but should be blocked by the browser.'
+        : 'The inline script should run immediately because there is no CSP guardrail.',
+  });
+});
+
+const port = Number(process.env.PORT);
+app.listen(port, () => console.log('Server on :' + port));
+`,
+    clientCode: `document.body.innerHTML = '';
+
+const root = document.createElement('div');
+root.style.cssText = [
+  'font-family: system-ui',
+  'padding: 24px',
+  'background: #020617',
+  'color: #e2e8f0',
+  'min-height: 100vh',
+].join(';');
+
+root.innerHTML = [
+  '<h1 style="margin: 0 0 8px;">Content Security Policy</h1>',
+  '<p style="margin: 0 0 18px; color: #94a3b8; max-width: 900px;">',
+  'The client asks the server for two routes and embeds both responses. Each response contains the same inline script. Only the CSP-protected response should keep that script from executing.',
+  '</p>',
+  '<div id="grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px;"></div>',
+].join('');
+
+document.body.appendChild(root);
+
+const grid = document.getElementById('grid');
+
+async function addScenario(mode, title) {
+  const meta = await fetch(SANDBOX_URL + '/api/csp/meta/' + mode).then((res) => res.json());
+
+  const card = document.createElement('section');
+  card.style.cssText = 'background:#0f172a;border:1px solid #334155;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;';
+
+  const heading = document.createElement('h2');
+  heading.textContent = title;
+  heading.style.margin = '0';
+
+  const details = document.createElement('pre');
+  details.textContent = meta.header + '\\n\\n' + meta.expected;
+  details.style.cssText = 'margin:0;padding:12px;border-radius:12px;background:#111827;color:#cbd5e1;font-size:12px;white-space:pre-wrap;';
+
+  const verdict = document.createElement('div');
+  verdict.textContent = mode === 'safe'
+    ? 'Inside the frame, the page should keep saying "Inline script has not run." because the CSP header blocks the inline script.'
+    : 'Inside the frame, the page should change to "Inline script executed..." because nothing blocked it.';
+  verdict.style.cssText = 'font-size:12px;color:#cbd5e1;';
+
+  const frame = document.createElement('iframe');
+  frame.src = SANDBOX_URL + '/lab/csp/' + mode;
+  frame.style.cssText = 'width:100%;height:240px;border:1px solid #334155;border-radius:12px;background:#fff;';
+
+  card.append(heading, details, verdict, frame);
+  grid.appendChild(card);
+}
+
+await addScenario('unsafe', 'Without CSP');
+await addScenario('safe', 'With CSP');
+`,
+  },
+  {
+    id: "xss",
+    label: "Reflected XSS Rendering",
+    description:
+      "Send one attacker-controlled string through unsafe and escaped server rendering paths.",
+    serverCode: `import express from 'express';
+
+const app = express();
+
+app.use((req, res, next) => {
+  const origin = typeof req.headers.origin === 'string' ? req.headers.origin : '';
+  if (origin) {
+    res.setHeader('Access-Control-Allow-Origin', origin);
+    res.setHeader('Vary', 'Origin');
+    res.setHeader('Access-Control-Allow-Credentials', 'true');
+  } else {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+  }
+  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, X-CSRF-Token');
+  if (req.method === 'OPTIONS') {
+    res.sendStatus(204);
+    return;
+  }
+  next();
+});
+
+const DEFAULT_PAYLOAD = '<img src=x onerror="document.body.dataset.attack=\\'true\\';document.getElementById(\\'result\\').textContent=\\'Payload executed on the page\\';">';
+
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function renderProfile(name, safe) {
+  const renderedName = safe ? escapeHtml(name) : name;
+  const title = safe
+    ? 'Server escapes user input before rendering'
+    : 'Server injects raw user input directly into HTML';
+
+  return [
+    '<!doctype html>',
+    '<html>',
+    '<head>',
+    '  <meta charset="utf-8" />',
+    '  <title>XSS demo</title>',
+    '  <style>',
+    '    body { font-family: system-ui; background: #0f172a; color: #e2e8f0; padding: 18px; margin: 0; }',
+    '    .card { background: #111827; border: 1px solid #334155; border-radius: 12px; padding: 16px; }',
+    '    .input { margin-top: 12px; padding: 12px; border-radius: 10px; background: #020617; color: #cbd5e1; word-break: break-word; }',
+    '  </style>',
+    '</head>',
+    '<body>',
+    '  <div class="card">',
+    '    <h1>' + title + '</h1>',
+    '    <p id="result">No payload has executed.</p>',
+    '    <div class="input">Hello, ' + renderedName + '</div>',
+    '  </div>',
+    '</body>',
+    '</html>',
+  ].join('\\n');
+}
+
+app.get('/lab/xss/:mode', (req, res) => {
+  const mode = req.params.mode === 'safe' ? 'safe' : 'unsafe';
+  const name = typeof req.query.name === 'string' ? req.query.name : DEFAULT_PAYLOAD;
+  res.send(renderProfile(name, mode === 'safe'));
+});
+
+app.get('/api/xss/payload', (_req, res) => {
+  res.json({
+    payload: DEFAULT_PAYLOAD,
+    explanation:
+      'The client fetches one attacker-controlled string, then sends it through both the unsafe and escaped server rendering paths.',
+  });
+});
+
+const port = Number(process.env.PORT);
+app.listen(port, () => console.log('Server on :' + port));
+`,
+    clientCode: `document.body.innerHTML = '';
+
+const payloadInfo = await fetch(SANDBOX_URL + '/api/xss/payload').then((res) => res.json());
+
+const root = document.createElement('div');
+root.style.cssText = [
+  'font-family: system-ui',
+  'padding: 24px',
+  'background: #020617',
+  'color: #e2e8f0',
+  'min-height: 100vh',
+].join(';');
+
+root.innerHTML = [
+  '<h1 style="margin:0 0 8px;">Reflected XSS</h1>',
+  '<p style="margin:0 0 12px; color:#94a3b8; max-width: 900px;">' + payloadInfo.explanation + '</p>',
+  '<pre style="margin:0 0 18px;padding:12px;border-radius:12px;background:#111827;color:#fda4af;white-space:pre-wrap;">' + payloadInfo.payload.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</pre>',
+  '<div id="grid" style="display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:16px;"></div>',
+].join('');
+
+document.body.appendChild(root);
+
+const grid = document.getElementById('grid');
+const encodedPayload = encodeURIComponent(payloadInfo.payload);
+
+function mountFrame(mode, title) {
+  const card = document.createElement('section');
+  card.style.cssText = 'background:#0f172a;border:1px solid #334155;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;';
+
+  const heading = document.createElement('h2');
+  heading.textContent = title;
+  heading.style.margin = '0';
+
+  const verdict = document.createElement('div');
+  verdict.textContent = mode === 'safe'
+    ? 'Inside the frame, the payload should stay visible as text because the server escaped it before rendering.'
+    : 'Inside the frame, the payload should execute and change the page content because the server rendered it raw.';
+  verdict.style.cssText = 'font-size:12px;color:#cbd5e1;';
+
+  const frame = document.createElement('iframe');
+  frame.src = SANDBOX_URL + '/lab/xss/' + mode + '?name=' + encodedPayload;
+  frame.style.cssText = 'width:100%;height:240px;border:1px solid #334155;border-radius:12px;background:#fff;';
+
+  card.append(heading, verdict, frame);
+  grid.appendChild(card);
+}
+
+mountFrame('unsafe', 'Unsafe interpolation');
+mountFrame('safe', 'Escaped output');
+`,
+  },
+  {
+    id: "csrf",
+    label: "CSRF Token Flow",
+    description:
+      "Walk through cookie-authenticated transfers with and without a server-side CSRF token check.",
+    serverCode: `import crypto from 'node:crypto';
+import express from 'express';
+
+const app = express();
+app.use(express.json());
+
+app.use((req, res, next) => {
+  const origin = typeof req.headers.origin === 'string' ? req.headers.origin : '';
+  if (origin) {
+    res.setHeader('Access-Control-Allow-Origin', origin);
+    res.setHeader('Vary', 'Origin');
+    res.setHeader('Access-Control-Allow-Credentials', 'true');
+  } else {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+  }
+  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, X-CSRF-Token');
+  if (req.method === 'OPTIONS') {
+    res.sendStatus(204);
+    return;
+  }
+  next();
+});
+
+const sessions = new Map();
+
+function cookieName(mode) {
+  return mode === 'safe' ? 'safe_sid' : 'unsafe_sid';
+}
+
+function sessionKey(mode, sid) {
+  return mode + ':' + sid;
+}
+
+function parseCookies(header = '') {
+  return header.split(';').reduce((acc, part) => {
+    const trimmed = part.trim();
+    if (!trimmed) return acc;
+    const eq = trimmed.indexOf('=');
+    if (eq === -1) return acc;
+    const name = trimmed.slice(0, eq);
+    const value = trimmed.slice(eq + 1);
+    acc[name] = decodeURIComponent(value);
+    return acc;
+  }, {});
+}
+
+function createSession(mode, res) {
+  const sid = crypto.randomUUID();
+  const record = {
+    balance: 1000,
+    csrfToken: crypto.randomBytes(16).toString('hex'),
+  };
+  sessions.set(sessionKey(mode, sid), record);
+  res.setHeader(
+    'Set-Cookie',
+    cookieName(mode) + '=' + sid + '; Path=/; HttpOnly; SameSite=Lax',
+  );
+  return { sid, record };
+}
+
+function readSession(mode, req) {
+  const cookies = parseCookies(req.headers.cookie || '');
+  const sid = cookies[cookieName(mode)];
+  if (!sid) return null;
+  const record = sessions.get(sessionKey(mode, sid));
+  if (!record) return null;
+  return { sid, record };
+}
+
+app.post('/api/csrf/reset', (_req, res) => {
+  sessions.clear();
+  res.json({ ok: true });
+});
+
+app.post('/api/csrf/:mode/login', (req, res) => {
+  const mode = req.params.mode === 'safe' ? 'safe' : 'unsafe';
+  const session = createSession(mode, res);
+  res.json({
+    ok: true,
+    mode,
+    balance: session.record.balance,
+    csrfToken: mode === 'safe' ? session.record.csrfToken : null,
+  });
+});
+
+app.post('/api/csrf/:mode/transfer', (req, res) => {
+  const mode = req.params.mode === 'safe' ? 'safe' : 'unsafe';
+  const session = readSession(mode, req);
+  if (!session) {
+    return res.status(401).json({ ok: false, error: 'No authenticated session. Login first.' });
+  }
+
+  if (mode === 'safe') {
+    const token = req.get('x-csrf-token');
+    if (!token || token !== session.record.csrfToken) {
+      return res.status(403).json({ ok: false, error: 'CSRF token missing or invalid.' });
+    }
+  }
+
+  const amount = Math.max(0, Number(req.body.amount || 0));
+  session.record.balance = Math.max(0, session.record.balance - amount);
+  sessions.set(sessionKey(mode, session.sid), session.record);
+
+  res.json({
+    ok: true,
+    mode,
+    transferred: amount,
+    balance: session.record.balance,
+  });
+});
+
+app.get('/api/csrf/:mode/state', (req, res) => {
+  const mode = req.params.mode === 'safe' ? 'safe' : 'unsafe';
+  const session = readSession(mode, req);
+  if (!session) {
+    return res.status(404).json({ ok: false, error: 'No session for this mode yet.' });
+  }
+  res.json({ ok: true, mode, balance: session.record.balance });
+});
+
+const port = Number(process.env.PORT);
+app.listen(port, () => console.log('Server on :' + port));
+`,
+    clientCode: `document.body.innerHTML = '';
+
+const root = document.createElement('div');
+root.style.cssText = [
+  'font-family: system-ui',
+  'padding: 24px',
+  'background: #020617',
+  'color: #e2e8f0',
+  'min-height: 100vh',
+].join(';');
+
+root.innerHTML = [
+  '<h1 style="margin:0 0 8px;">CSRF token flow</h1>',
+  '<p style="margin:0 0 16px;color:#94a3b8;max-width:900px;">',
+  'The client logs into both server flows, simulates an attacker-forged POST, then retries the protected flow with the token that only the legitimate app received during login.',
+  '</p>',
+  '<div id="summary" style="display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:12px;margin-bottom:16px;"></div>',
+  '<div id="log" style="background:#0f172a;border:1px solid #334155;border-radius:16px;padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;white-space:pre-wrap;"></div>',
+].join('');
+
+document.body.appendChild(root);
+
+const summary = document.getElementById('summary');
+const log = document.getElementById('log');
+
+function addLog(message, color) {
+  const line = document.createElement('div');
+  line.textContent = message;
+  line.style.color = color || '#cbd5e1';
+  line.style.marginBottom = '6px';
+  log.appendChild(line);
+}
+
+async function requestJson(path, init = {}) {
+  const headers = new Headers(init.headers || {});
+  if (init.body && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  const response = await fetch(SANDBOX_URL + path, {
+    credentials: 'include',
+    ...init,
+    headers,
+  });
+
+  const body = await response.json().catch(() => ({}));
+  return { status: response.status, body };
+}
+
+function addSummaryCard(title, body, tone) {
+  const card = document.createElement('section');
+  const border = tone === 'good' ? '#166534' : tone === 'bad' ? '#7f1d1d' : '#334155';
+  const accent = tone === 'good' ? '#86efac' : tone === 'bad' ? '#fca5a5' : '#cbd5e1';
+  card.style.cssText = 'background:#0f172a;border:1px solid ' + border + ';border-radius:16px;padding:16px;';
+  card.innerHTML = [
+    '<h2 style="margin:0 0 8px;color:' + accent + ';font-size:15px;">' + title + '</h2>',
+    '<div style="font-size:13px;color:#cbd5e1;white-space:pre-wrap;">' + body + '</div>',
+  ].join('');
+  summary.appendChild(card);
+}
+
+await requestJson('/api/csrf/reset', { method: 'POST' });
+addLog('1. Reset in-memory sessions so both flows start clean.');
+
+const unsafeLogin = await requestJson('/api/csrf/unsafe/login', { method: 'POST' });
+addLog('2. Victim logs into the unsafe flow. Balance: ' + unsafeLogin.body.balance, '#93c5fd');
+
+const forgedUnsafe = await requestJson('/api/csrf/unsafe/transfer', {
+  method: 'POST',
+  body: JSON.stringify({ amount: 150 }),
+});
+addLog(
+  '3. Attacker forges POST /api/csrf/unsafe/transfer without any token. Status ' +
+    forgedUnsafe.status +
+    ' -> ' +
+    JSON.stringify(forgedUnsafe.body),
+  forgedUnsafe.status < 400 ? '#fca5a5' : '#cbd5e1',
+);
+
+const unsafeState = await requestJson('/api/csrf/unsafe/state');
+addSummaryCard(
+  'Unsafe server',
+  'Forged transfer succeeded.\\nRemaining balance: ' + unsafeState.body.balance,
+  'bad',
+);
+
+const safeLogin = await requestJson('/api/csrf/safe/login', { method: 'POST' });
+addLog('4. Victim logs into the safe flow and receives a CSRF token.', '#93c5fd');
+
+const forgedSafe = await requestJson('/api/csrf/safe/transfer', {
+  method: 'POST',
+  body: JSON.stringify({ amount: 150 }),
+});
+addLog(
+  '5. Attacker repeats the forged POST without the token. Status ' +
+    forgedSafe.status +
+    ' -> ' +
+    JSON.stringify(forgedSafe.body),
+  forgedSafe.status >= 400 ? '#86efac' : '#fca5a5',
+);
+
+const legitSafe = await requestJson('/api/csrf/safe/transfer', {
+  method: 'POST',
+  headers: { 'x-csrf-token': safeLogin.body.csrfToken },
+  body: JSON.stringify({ amount: 150 }),
+});
+addLog(
+  '6. Legitimate client retries with the server-issued token. Status ' +
+    legitSafe.status +
+    ' -> ' +
+    JSON.stringify(legitSafe.body),
+  legitSafe.status < 400 ? '#86efac' : '#fca5a5',
+);
+
+const safeState = await requestJson('/api/csrf/safe/state');
+addSummaryCard(
+  'Token-protected server',
+  'Forged request blocked.\\nLegitimate request succeeded.\\nRemaining balance: ' + safeState.body.balance,
+  'good',
+);
+`,
+  },
+  {
+    id: "mfe-csp-xss",
+    label: "Module Federation CSP and XSS",
+    description:
+      "See how host CSP must allow trusted remoteEntry origins, and how one unsafe remote can XSS the whole shell.",
+    serverCode: `import express from 'express';
+
+const app = express();
+
+const hostPort = 3100;
+const profilePort = 3101;
+const checkoutPort = 3102;
+
+app.use((_req, res, next) => {
+  res.setHeader(
+    'Content-Security-Policy',
+    [
+      "default-src 'self'",
+      "script-src 'self' http://localhost:" + profilePort + " http://localhost:" + checkoutPort,
+      "style-src 'self' 'unsafe-inline'",
+      "img-src 'self' data:",
+      "font-src 'self' data:",
+      "connect-src 'self' http://localhost:" + hostPort + " ws://localhost:" + hostPort + " http://localhost:" + profilePort + " ws://localhost:" + profilePort + " http://localhost:" + checkoutPort + " ws://localhost:" + checkoutPort,
+      "object-src 'none'",
+      "base-uri 'self'",
+      "frame-ancestors 'none'",
+    ].join('; '),
+  );
+  next();
+});
+
+app.get('/explanation', (_req, res) => {
+  res.json({
+    why: [
+      'Module Federation still loads remoteEntry.js as remote scripts.',
+      'That means the host CSP has to allow each trusted remote origin in script-src.',
+      'But once a remote is trusted and mounted into the page, an XSS bug inside that remote still executes with host-page privileges.',
+    ],
+  });
+});
+
+const port = Number(process.env.PORT);
+app.listen(port, () => console.log('Server on :' + port));
+`,
+    clientCode: "",
+    clientType: "module-federation",
+    reactFiles: MFE_BROWSER_SECURITY_WORKSPACE.files,
+    reactActiveFile: MFE_BROWSER_SECURITY_WORKSPACE.activeFile,
+  },
+  {
+    id: "mfe-build-serve",
+    label: "Module Federation: Build + Static Serve",
+    description:
+      "Webpack builds each app to dist/, then a plain Node HTTP server serves the static files — the way it works in production.",
+    serverCode: `import express from 'express';
+
+const app = express();
+
+const hostPort = 3100;
+const profilePort = 3101;
+const checkoutPort = 3102;
+
+// In this lab the webpack apps handle their own static serving.
+// This server is here so you can add any backend API endpoints
+// that the federated apps might call (e.g. auth, data).
+app.get('/api/health', (_req, res) => {
+  res.json({ ok: true });
+});
+
+const port = Number(process.env.PORT);
+app.listen(port, () => console.log('API on :' + port));
+`,
+    clientCode: "",
+    clientType: "module-federation",
+    reactFiles: (() => {
+      const workspace = cloneFrontendLabWorkspace(
+        DEFAULT_MODULE_FEDERATION_LAB,
+        "module-federation",
+      );
+
+      // Build-time serve scripts for each app.
+      // Each script runs webpack in build mode then starts a bare http.createServer
+      // to serve the dist/ folder — this is the production pattern, not a dev server.
+      const HOST_SERVE = `
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+
+const port = Number(process.env.HOST_PORT || 3100);
+const profilePort = Number(process.env.PROFILE_PORT || 3101);
+const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
+
+const MIME = {
+  '.html': 'text/html',
+  '.js': 'application/javascript; charset=utf-8',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.map': 'application/json',
+};
+
+// CSP is set by this Node server, not by webpack-dev-server.
+// In production this lives in your NGINX/Express config.
+const csp = [
+  "default-src 'self'",
+  "script-src 'self' http://localhost:" + profilePort + " http://localhost:" + checkoutPort,
+  "style-src 'self' 'unsafe-inline'",
+  "img-src 'self' data:",
+  "font-src 'self' data:",
+  "connect-src 'self' http://localhost:" + port + " http://localhost:" + profilePort + " http://localhost:" + checkoutPort,
+  "object-src 'none'",
+  "base-uri 'self'",
+  "frame-ancestors 'self' http://localhost:5173 http://127.0.0.1:5173",
+].join('; ');
+
+console.log('[host] Building with webpack...');
+const config = require('./webpack.config.js');
+webpack(config, (err, stats) => {
+  if (err) { console.error('[host] webpack error:', err.message); process.exit(1); }
+  if (stats.hasErrors()) {
+    console.error('[host] webpack compilation errors:');
+    console.error(stats.toString({ colors: false, all: false, errors: true }));
+    process.exit(1);
+  }
+  console.log('[host] Build complete. Starting static server...');
+
+  const dist = path.resolve(__dirname, 'dist');
+  http.createServer((req, res) => {
+    const url = req.url === '/' ? '/index.html' : req.url.split('?')[0];
+    const filePath = path.join(dist, url);
+    const ext = path.extname(filePath) || '.html';
+    if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+      res.writeHead(200, {
+        'Content-Type': MIME[ext] || 'application/octet-stream',
+        'Content-Security-Policy': csp,
+        'Access-Control-Allow-Origin': '*',
+        'Cache-Control': 'no-store',
+      });
+      fs.createReadStream(filePath).pipe(res);
+    } else {
+      // SPA fallback
+      const index = path.join(dist, 'index.html');
+      res.writeHead(200, {
+        'Content-Type': 'text/html',
+        'Content-Security-Policy': csp,
+        'Access-Control-Allow-Origin': '*',
+        'Cache-Control': 'no-store',
+      });
+      fs.createReadStream(index).pipe(res);
+    }
+  }).listen(port, () => {
+    console.log('[host] Listening on http://localhost:' + port + '/');
+  });
+});
+`;
+
+      const REMOTE_SERVE = (appName: string) => `
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+
+const portKey = '${appName === "profile" ? "PROFILE_PORT" : "CHECKOUT_PORT"}';
+const port = Number(process.env[portKey] || ${appName === "profile" ? "3101" : "3102"});
+
+const MIME = {
+  '.js': 'application/javascript; charset=utf-8',
+  '.html': 'text/html',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.map': 'application/json',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+};
+
+console.log('[${appName}] Building with webpack...');
+const config = require('./webpack.config.js');
+webpack(config, (err, stats) => {
+  if (err) { console.error('[${appName}] webpack error:', err.message); process.exit(1); }
+  if (stats.hasErrors()) {
+    console.error('[${appName}] webpack compilation errors:');
+    console.error(stats.toString({ colors: false, all: false, errors: true }));
+    process.exit(1);
+  }
+  console.log('[${appName}] Build complete. Starting static server...');
+
+  const dist = path.resolve(__dirname, 'dist');
+  http.createServer((req, res) => {
+    const url = req.url === '/' ? '/index.html' : req.url.split('?')[0];
+    const filePath = path.join(dist, url);
+    const ext = path.extname(filePath) || '.html';
+    if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+      res.writeHead(200, {
+        'Content-Type': MIME[ext] || 'application/octet-stream',
+        'Access-Control-Allow-Origin': '*',
+        'Cache-Control': 'no-store',
+      });
+      fs.createReadStream(filePath).pipe(res);
+    } else {
+      res.writeHead(404);
+      res.end('Not found');
+    }
+  }).listen(port, () => {
+    console.log('[${appName}] Listening on http://localhost:' + port + '/');
+  });
+});
+`;
+
+      const MF_BUILD_SERVE_PACKAGE_JSON = `{
+  "name": "webpack-module-federation-lab",
+  "private": true,
+  "workspaces": [
+    "apps/host",
+    "apps/profile",
+    "apps/checkout"
+  ],
+  "scripts": {
+    "dev": "concurrently -k -n host,profile,checkout -c cyan,magenta,yellow 'npm run buildserve --workspace=@mf-lab/host' 'npm run buildserve --workspace=@mf-lab/profile' 'npm run buildserve --workspace=@mf-lab/checkout'"
+  },
+  "devDependencies": {
+    "concurrently": "^9.2.1"
+  }
+}
+`;
+
+      const HOST_PACKAGE_JSON = `{
+  "name": "@mf-lab/host",
+  "private": true,
+  "scripts": {
+    "buildserve": "node buildAndServe.js"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.6.1"
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.0",
+    "esbuild-loader": "^4.4.3",
+    "html-webpack-plugin": "^5.6.7",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2"
+  }
+}
+`;
+
+      const REMOTE_PACKAGE_JSON = (name: string) => `{
+  "name": "@mf-lab/${name}",
+  "private": true,
+  "scripts": {
+    "buildserve": "node buildAndServe.js"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.6.1"
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.0",
+    "esbuild-loader": "^4.4.3",
+    "html-webpack-plugin": "^5.6.7",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2"
+  }
+}
+`;
+
+      return {
+        ...workspace.files,
+        "README.md": `# Module Federation: Build + Static Serve
+
+This variant builds each app with webpack then serves the dist/ output with a plain Node
+HTTP server. This mirrors how a real production deployment works.
+
+## The key difference from the dev-server lab
+
+- webpack-dev-server sets CSP in its own devServer.headers config
+- Here each app's buildAndServe.js starts an http.createServer that sets the headers
+- This is the real production pattern: your web server (NGINX, Express, CDN edge) owns headers
+- webpack knows nothing about HTTP headers in production
+
+## What to inspect
+
+- apps/host/buildAndServe.js - builds webpack then starts a Node server with CSP
+- apps/profile/buildAndServe.js - builds webpack then starts a bare static server
+- apps/checkout/buildAndServe.js - same, but checkout remote
+- apps/host/webpack.config.js - no devServer.headers here: headers are now the server's job
+
+## Suggested experiments
+
+1. Remove a remote origin from the csp array in apps/host/buildAndServe.js and rerun.
+2. Notice the browser blocks the remoteEntry.js fetch even though webpack built fine.
+3. Add a response header in apps/host/buildAndServe.js and check it in DevTools Network tab.
+`,
+        "package.json": MF_BUILD_SERVE_PACKAGE_JSON,
+        "apps/host/package.json": HOST_PACKAGE_JSON,
+        "apps/host/buildAndServe.js": HOST_SERVE,
+        "apps/host/webpack.config.js": workspace.files[
+          "apps/host/webpack.config.js"
+        ]!.replace(
+          /devServer:[\s\S]*?(?=\n  plugins)/,
+          "// No devServer block — in production the web server sets headers, not webpack\n",
+        ).replace('mode: "development"', 'mode: "production"'),
+        "apps/profile/package.json": REMOTE_PACKAGE_JSON("profile"),
+        "apps/profile/buildAndServe.js": REMOTE_SERVE("profile"),
+        "apps/profile/webpack.config.js": workspace.files[
+          "apps/profile/webpack.config.js"
+        ]!.replace(
+          /devServer:[\s\S]*?(?=\n  plugins)/,
+          "// No devServer block\n",
+        ).replace('mode: "development"', 'mode: "production"'),
+        "apps/checkout/package.json": REMOTE_PACKAGE_JSON("checkout"),
+        "apps/checkout/buildAndServe.js": REMOTE_SERVE("checkout"),
+        "apps/checkout/webpack.config.js": workspace.files[
+          "apps/checkout/webpack.config.js"
+        ]!.replace(
+          /devServer:[\s\S]*?(?=\n  plugins)/,
+          "// No devServer block\n",
+        ).replace('mode: "development"', 'mode: "production"'),
+      };
+    })(),
+    reactActiveFile: "apps/host/buildAndServe.js",
+  },
+  {
+    id: "mfe-ssr-nextjs",
+    label: "MFE + SSR: Next.js Host with Remote Render Endpoints",
+    description:
+      "A Next.js host server-renders pages by fetching HTML from remote /ssr endpoints, then hydrates them client-side with the same remoteEntry.js.",
+    serverCode: `import express from 'express';
+
+// This is here for any shared API logic.
+// The actual SSR rendering happens inside each MFE app's own server (apps/profile, apps/checkout)
+// and the Next.js host fetches from those /ssr endpoints at request time.
+const app = express();
+app.get('/api/health', (_req, res) => res.json({ ok: true }));
+
+const port = Number(process.env.PORT);
+app.listen(port, () => console.log('API on :' + port));
+`,
+    clientCode: "",
+    clientType: "module-federation",
+    reactActiveFile: "apps/host/app/page.js",
+    reactFiles: (() => {
+      // ─── Remote shared build helper ──────────────────────────────────────────
+      // Each remote (profile, checkout) runs a Node script that:
+      //   1. Builds with webpack (produces remoteEntry.js in dist/)
+      //   2. Starts an HTTP server that serves dist/ AND a /ssr endpoint
+      //      that returns renderToString() output for the exposed component
+      // The Next.js host calls /ssr at request time on the server → true SSR.
+
+      const REMOTE_SSR_SERVE = (
+        appName: string,
+        componentName: string,
+        portEnvKey: string,
+        defaultPort: number,
+      ) => `
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const React = require('react');
+const { renderToString } = require('react-dom/server');
+
+const port = Number(process.env.${portEnvKey} || ${defaultPort});
+
+const MIME = {
+  '.js': 'application/javascript; charset=utf-8',
+  '.html': 'text/html',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.map': 'application/json',
+};
+
+// Build the webpack bundle first so remoteEntry.js exists on disk.
+console.log('[${appName}] Building with webpack...');
+const config = require('./webpack.config.js');
+webpack(config, (err, stats) => {
+  if (err || stats.hasErrors()) {
+    console.error('[${appName}] Build failed:', err?.message ?? stats.toString({ errors: true, all: false }));
+    process.exit(1);
+  }
+  console.log('[${appName}] Build done. Starting server...');
+
+  // Load the SSR component directly from source (not from the bundle).
+  // In production you would build a separate CJS/ESM server bundle.
+  // Here we require the JSX via esbuild-register for simplicity.
+  require('esbuild-register/dist/node').register({ jsx: 'automatic' });
+  const Component = require('./src/${componentName}.jsx').default;
+
+  const dist = path.resolve(__dirname, 'dist');
+
+  http.createServer((req, res) => {
+    const url = req.url.split('?')[0];
+
+    // SSR endpoint – called by the Next.js host at request time
+    if (url === '/ssr') {
+      try {
+        const html = renderToString(React.createElement(Component));
+        res.writeHead(200, {
+          'Content-Type': 'application/json',
+          'Access-Control-Allow-Origin': '*',
+        });
+        res.end(JSON.stringify({ html, componentName: '${componentName}' }));
+      } catch (ssrErr) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: String(ssrErr) }));
+      }
+      return;
+    }
+
+    // Static file serving – remoteEntry.js and other webpack output
+    const filePath = path.join(dist, url === '/' ? '/index.html' : url);
+    if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+      const ext = path.extname(filePath) || '.js';
+      res.writeHead(200, {
+        'Content-Type': MIME[ext] || 'application/octet-stream',
+        'Access-Control-Allow-Origin': '*',
+        'Cache-Control': 'no-store',
+      });
+      fs.createReadStream(filePath).pipe(res);
+    } else {
+      res.writeHead(404);
+      res.end('Not found');
+    }
+  }).listen(port, () => {
+    console.log('[${appName}] Listening on http://localhost:' + port + '/');
+  });
+});
+`;
+
+      const REMOTE_PACKAGE = (name: string) => `{
+  "name": "@mf-ssr/${name}",
+  "private": true,
+  "scripts": {
+    "build": "npx webpack --config webpack.config.js",
+    "buildserve": "node buildAndServe.js"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.0",
+    "esbuild-loader": "^4.4.3",
+    "esbuild-register": "^3.6.0",
+    "html-webpack-plugin": "^5.6.7",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2"
+  }
+}
+`;
+
+      const REMOTE_WEBPACK = (
+        name: string,
+        portEnvKey: string,
+        defaultPort: number,
+        componentFile: string,
+      ) => `
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { ModuleFederationPlugin } = webpack.container;
+
+const port = Number(process.env.${portEnvKey} || ${defaultPort});
+
+module.exports = {
+  mode: 'production',
+  entry: path.resolve(__dirname, './src/index.js'),
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: 'http://localhost:' + port + '/',
+    clean: true,
+  },
+  resolve: { extensions: ['.js', '.jsx'] },
+  module: {
+    rules: [{
+      test: /\\.jsx?$/,
+      exclude: /node_modules/,
+      use: { loader: 'esbuild-loader', options: { loader: 'jsx', jsx: 'automatic', target: 'es2020' } },
+    }],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: '${name}',
+      filename: 'remoteEntry.js',
+      exposes: { './${componentFile}': path.resolve(__dirname, './src/${componentFile}.jsx') },
+      shared: {
+        react: { singleton: true, requiredVersion: '^18.3.1' },
+        'react-dom': { singleton: true, requiredVersion: '^18.3.1' },
+      },
+    }),
+    new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html') }),
+  ],
+};
+`;
+
+      const PROFILE_CARD_JSX = `import React from 'react';
+
+// This component runs on the server (renderToString) AND in the browser (hydration).
+// SSR means the HTML is generated here on the remote's Node server at request time,
+// sent to the Next.js host, inserted into the page, then React takes over client-side.
+export default function ProfileCard({ ssrContext = false }) {
+  return (
+    <section style={{ fontFamily: 'ui-sans-serif, system-ui, sans-serif' }}>
+      <div style={{
+        background: 'linear-gradient(135deg, #ede9fe, #f8fafc)',
+        borderRadius: '0.75rem',
+        border: '1px solid #ddd6fe',
+        padding: '1.25rem',
+      }}>
+        <p style={{ margin: '0 0 0.5rem', color: '#7c3aed', fontSize: '0.75rem', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
+          {ssrContext ? 'Rendered on remote server → sent to Next.js host' : 'Hydrated in browser'}
+        </p>
+        <h2 style={{ margin: '0 0 0.75rem', color: '#1e293b' }}>Profile Remote</h2>
+        <p style={{ margin: 0, color: '#475569', fontSize: '0.9rem' }}>
+          This component was server-rendered by the profile remote app, not by Next.js itself.
+          The host received raw HTML from <code>http://profile-remote/ssr</code> and inserted it
+          before the page was sent to the browser.
+        </p>
+        <dl style={{ display: 'grid', gridTemplateColumns: 'max-content 1fr', gap: '0.4rem 1rem', marginTop: '1rem' }}>
+          <dt style={{ color: '#94a3b8', fontSize: '0.8rem' }}>Owner</dt>
+          <dd style={{ margin: 0, color: '#0f172a', fontSize: '0.8rem' }}>Platform Team</dd>
+          <dt style={{ color: '#94a3b8', fontSize: '0.8rem' }}>Render origin</dt>
+          <dd style={{ margin: 0, color: '#0f172a', fontSize: '0.8rem' }}>profile remote /ssr</dd>
+        </dl>
+      </div>
+    </section>
+  );
+}
+`;
+
+      const CHECKOUT_PANEL_JSX = `import React from 'react';
+
+// Same SSR pattern as ProfileCard: rendered to HTML string on the remote Node server,
+// fetched by the Next.js host during getServerSideProps/page render, then hydrated.
+export default function CheckoutPanel({ ssrContext = false }) {
+  return (
+    <section style={{ fontFamily: 'ui-sans-serif, system-ui, sans-serif' }}>
+      <div style={{
+        background: 'linear-gradient(135deg, #fff7ed, #fef9f0)',
+        borderRadius: '0.75rem',
+        border: '1px solid #fed7aa',
+        padding: '1.25rem',
+      }}>
+        <p style={{ margin: '0 0 0.5rem', color: '#ea580c', fontSize: '0.75rem', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
+          {ssrContext ? 'Rendered on remote server → sent to Next.js host' : 'Hydrated in browser'}
+        </p>
+        <h2 style={{ margin: '0 0 0.75rem', color: '#7c2d12' }}>Checkout Remote</h2>
+        <p style={{ margin: 0, color: '#9a3412', fontSize: '0.9rem' }}>
+          This component was server-rendered by the checkout remote, not by Next.js.
+          The host called <code>http://checkout-remote/ssr</code> and got back an HTML string
+          that was embedded in the page before it reached the browser.
+        </p>
+        <div style={{ marginTop: '1rem', padding: '0.75rem', background: '#fff7ed', borderRadius: '0.5rem', border: '1px solid #fdba74' }}>
+          <p style={{ margin: 0, color: '#7c2d12', fontSize: '0.85rem', fontWeight: 600 }}>
+            Key SSR insight: the remote owns its own render logic.
+          </p>
+          <p style={{ margin: '0.25rem 0 0', color: '#9a3412', fontSize: '0.8rem' }}>
+            If checkout needs user data it can fetch it server-side itself before rendering,
+            rather than waiting for the browser to fetch and rerender.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+`;
+
+      const REMOTE_INDEX_JS = `// Dynamic import acts as the async boundary that Module Federation needs.
+// Without this the shared React singleton handshake would run synchronously
+// and could break if the module scope initialises before the share scope is ready.
+import('./bootstrap');
+`;
+
+      const REMOTE_BOOTSTRAP = (
+        componentName: string,
+      ) => `import React from 'react';
+import { createRoot } from 'react-dom/client';
+import ${componentName} from './${componentName}.jsx';
+
+// Standalone preview when you open the remote's own URL directly.
+const root = document.getElementById('root');
+if (root) {
+  createRoot(root).render(React.createElement(${componentName}));
+}
+`;
+
+      const REMOTE_INDEX_HTML = (title: string) => `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${title}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`;
+
+      // ─── Next.js host ─────────────────────────────────────────────────────────
+      // Uses App Router. The page is a Server Component that fetches /ssr from
+      // each remote at render time. No client-side fetching — this is real SSR.
+
+      const HOST_PAGE_JS = `// force-dynamic tells Next.js never to statically generate this page.
+// Without it, 'next build' would try to pre-render the page and fetch the
+// remote /ssr endpoints at build time — which fails because the remotes
+// aren't running during the build step.
+export const dynamic = 'force-dynamic';
+
+// This is a React Server Component (Next.js App Router).
+// It runs ONLY on the server — no useState, no useEffect.
+// It fetches the pre-rendered HTML from each remote's /ssr endpoint
+// and injects it directly into the page as raw HTML.
+// The browser never has to wait for a client fetch — the HTML is already there.
+
+async function fetchRemoteSSR(url) {
+  try {
+    const res = await fetch(url, { cache: 'no-store' });
+    if (!res.ok) throw new Error('HTTP ' + res.status);
+    const data = await res.json();
+    return data.html ?? '<p style="color:red">No HTML from remote</p>';
+  } catch (err) {
+    return '<p style="color:#dc2626;padding:1rem;border:1px solid #fca5a5;border-radius:0.5rem">' +
+      'Remote SSR failed: ' + String(err) + '</p>';
+  }
+}
+
+export default async function HomePage() {
+  const profilePort = process.env.PROFILE_PORT || '3101';
+  const checkoutPort = process.env.CHECKOUT_PORT || '3102';
+
+  // These fetches happen on the server during the render pass.
+  // The browser receives complete HTML — no loading spinners for these sections.
+  const [profileHtml, checkoutHtml] = await Promise.all([
+    fetchRemoteSSR('http://localhost:' + profilePort + '/ssr'),
+    fetchRemoteSSR('http://localhost:' + checkoutPort + '/ssr'),
+  ]);
+
+  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.75rem',
+            letterSpacing: '0.08em', textTransform: 'uppercase' }}>
+            Next.js App Router — Server Component
+          </p>
+          <h1 style={{ margin: '0.35rem 0 0', fontSize: '2rem', color: '#0f172a' }}>
+            SSR with Module Federation remotes
+          </h1>
+          <p style={{ color: '#475569', maxWidth: '52rem', marginTop: '0.5rem' }}>
+            This page is a Server Component. It ran on the Next.js server, fetched HTML
+            from the profile and checkout remotes, and sent the complete page to the browser.
+            No client-side loading of these sections.
+          </p>
+        </div>
+
+        <div style={{ background: 'rgba(255,255,255,0.85)', border: '1px solid #bfdbfe',
+          borderRadius: '1rem', padding: '1rem', marginBottom: '1.5rem', fontSize: '0.85rem', color: '#1e40af' }}>
+          <strong>How this differs from pure client-side MFE:</strong>
+          <ul style={{ margin: '0.5rem 0 0', paddingLeft: '1.25rem', lineHeight: 1.7 }}>
+            <li>The host does a server-to-server HTTP call to each remote's <code>/ssr</code> endpoint</li>
+            <li>Each remote runs <code>renderToString()</code> on its own Node server</li>
+            <li>The host embeds the resulting HTML before sending the page to the browser</li>
+            <li>With pure client MFE the browser would load remoteEntry.js first, then render</li>
+          </ul>
+        </div>
+
+        <section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(320px,1fr))', gap: '1rem' }}>
+          <div>
+            <p style={{ margin: '0 0 0.5rem', color: '#64748b', fontSize: '0.75rem' }}>
+              profile remote — HTML from /ssr injected at server render time
+            </p>
+            <div dangerouslySetInnerHTML={{ __html: profileHtml }} />
+          </div>
+          <div>
+            <p style={{ margin: '0 0 0.5rem', color: '#64748b', fontSize: '0.75rem' }}>
+              checkout remote — HTML from /ssr injected at server render time
+            </p>
+            <div dangerouslySetInnerHTML={{ __html: checkoutHtml }} />
+          </div>
+        </section>
+
+      </div>
+    </main>
+  );
+}
+`;
+
+      const HOST_LAYOUT_JS = `export const metadata = { title: 'MFE SSR Host' };
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body style={{ margin: 0 }}>{children}</body>
+    </html>
+  );
+}
+`;
+
+      const HOST_NEXT_CONFIG = `/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Allow the Next.js server to make HTTP requests to local remote servers.
+  // In production you'd list your real remote origins here.
+  experimental: {},
+};
+
+module.exports = nextConfig;
+`;
+
+      const HOST_PACKAGE = `{
+  "name": "@mf-ssr/host",
+  "private": true,
+  "scripts": {
+    "build": "npx next build",
+    "buildserve": "node buildAndServe.js"
+  },
+  "dependencies": {
+    "next": "^14.2.29",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}
+`;
+
+      // Next.js build + start via programmatic API (avoids CLI path issues in workspaces)
+      const HOST_BUILD_SERVE = `
+const http = require('http');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const port = Number(process.env.HOST_PORT || 3100);
+const appDir = __dirname;
+
+console.log('[host] Building Next.js app...');
+// next build writes to .next/ — use npx to resolve from workspace root
+execSync('npx next build', {
+  cwd: appDir,
+  stdio: 'inherit',
+  env: {
+    ...process.env,
+    NODE_ENV: 'production',
+    PROFILE_PORT: process.env.PROFILE_PORT || '3101',
+    CHECKOUT_PORT: process.env.CHECKOUT_PORT || '3102',
+  },
+});
+console.log('[host] Build complete. Starting Next.js server...');
+
+// next start runs on its own port; we just proxy-wrap it so we can log the URL
+// using the standard format the cockpit readiness detector watches for.
+execSync('npx next start --port ' + port, {
+  cwd: appDir,
+  stdio: 'inherit',
+  env: {
+    ...process.env,
+    NODE_ENV: 'production',
+    PORT: String(port),
+    PROFILE_PORT: process.env.PROFILE_PORT || '3101',
+    CHECKOUT_PORT: process.env.CHECKOUT_PORT || '3102',
+  },
+});
+// next start blocks; print the URL before it exits so the readiness detector sees it.
+console.log('[host] Listening on http://localhost:' + port + '/');
+`;
+
+      const ROOT_PACKAGE = `{
+  "name": "mfe-ssr-lab",
+  "private": true,
+  "workspaces": [
+    "apps/host",
+    "apps/profile",
+    "apps/checkout"
+  ],
+  "scripts": {
+    "dev": "concurrently -k -n profile,checkout,host -c magenta,yellow,cyan 'npm run buildserve --workspace=@mf-ssr/profile' 'npm run buildserve --workspace=@mf-ssr/checkout' 'npm run buildserve --workspace=@mf-ssr/host'",
+    "build": "npm run build --workspace=@mf-ssr/profile && npm run build --workspace=@mf-ssr/checkout && npm run build --workspace=@mf-ssr/host",
+    "build:profile": "npm run build --workspace=@mf-ssr/profile",
+    "build:checkout": "npm run build --workspace=@mf-ssr/checkout",
+    "build:host": "npm run build --workspace=@mf-ssr/host"
+  },
+  "devDependencies": {
+    "concurrently": "^9.2.1"
+  }
+}
+`;
+
+      const README = `# MFE + SSR: Next.js Host with Remote Render Endpoints
+
+## Architecture
+
+\`\`\`
+Browser
+  └─ requests page from Next.js host (port HOST_PORT)
+        │
+        Next.js Server Component runs:
+          ├─ fetch("http://localhost:PROFILE_PORT/ssr")  → profile remote Node server
+          │     returns { html: "<section>...</section>" }
+          └─ fetch("http://localhost:CHECKOUT_PORT/ssr") → checkout remote Node server
+                returns { html: "<section>...</section>" }
+        │
+        Next.js assembles complete HTML and sends it to the browser
+        Browser receives fully-rendered page (no JS needed for initial content)
+\`\`\`
+
+## How each piece works
+
+### Remotes (profile, checkout)
+- Webpack production build produces \`remoteEntry.js\` in \`dist/\`
+- A Node \`http.createServer\` serves two things:
+  - \`GET /remoteEntry.js\` — the client-side module federation bundle
+  - \`GET /ssr\` — calls \`renderToString(<Component />)\` and returns \`{ html }\`
+
+### Host (Next.js App Router)
+- \`apps/host/app/page.js\` is a Server Component
+- It \`await Promise.all\`s both \`/ssr\` fetches during the server render pass
+- The browser receives complete HTML — no client loading spinners for remote content
+- \`dangerouslySetInnerHTML\` injects the remote HTML (safe here because we control the remote servers)
+
+## Key learning points
+
+1. **SSR is not free** — the host now depends on the remotes being up at render time
+2. **The /ssr endpoint is a contract** — remotes own their own server-side rendering logic
+3. **No webpack MF plugin needed on the host** — it just does a fetch, like any other API call
+4. **Hydration gap** — the HTML is there but React doesn\\'t hydrate these remote sections yet
+   (to add hydration you\\'d load remoteEntry.js client-side and call hydrateRoot())
+
+## Experiments
+
+1. Stop a remote (kill it from the console) and reload the page — see the fallback HTML
+2. Add props to the /ssr endpoint (e.g. \`?userId=123\`) and use them in renderToString
+3. Add a delay to a remote\\'s /ssr handler — watch it affect the host\\'s TTFB
+4. Add \`hydrateRoot()\` in a client component to make remote sections interactive
+`;
+
+      return {
+        "README.md": README,
+        "package.json": ROOT_PACKAGE,
+
+        // profile remote
+        "apps/profile/package.json": REMOTE_PACKAGE("profile"),
+        "apps/profile/buildAndServe.js": REMOTE_SSR_SERVE(
+          "profile",
+          "ProfileCard",
+          "PROFILE_PORT",
+          3101,
+        ),
+        "apps/profile/webpack.config.js": REMOTE_WEBPACK(
+          "profile",
+          "PROFILE_PORT",
+          3101,
+          "ProfileCard",
+        ),
+        "apps/profile/public/index.html": REMOTE_INDEX_HTML("Profile Remote"),
+        "apps/profile/src/index.js": REMOTE_INDEX_JS,
+        "apps/profile/src/bootstrap.js": REMOTE_BOOTSTRAP("ProfileCard"),
+        "apps/profile/src/ProfileCard.jsx": PROFILE_CARD_JSX,
+
+        // checkout remote
+        "apps/checkout/package.json": REMOTE_PACKAGE("checkout"),
+        "apps/checkout/buildAndServe.js": REMOTE_SSR_SERVE(
+          "checkout",
+          "CheckoutPanel",
+          "CHECKOUT_PORT",
+          3102,
+        ),
+        "apps/checkout/webpack.config.js": REMOTE_WEBPACK(
+          "checkout",
+          "CHECKOUT_PORT",
+          3102,
+          "CheckoutPanel",
+        ),
+        "apps/checkout/public/index.html": REMOTE_INDEX_HTML("Checkout Remote"),
+        "apps/checkout/src/index.js": REMOTE_INDEX_JS,
+        "apps/checkout/src/bootstrap.js": REMOTE_BOOTSTRAP("CheckoutPanel"),
+        "apps/checkout/src/CheckoutPanel.jsx": CHECKOUT_PANEL_JSX,
+
+        // Next.js host
+        "apps/host/package.json": HOST_PACKAGE,
+        "apps/host/next.config.js": HOST_NEXT_CONFIG,
+        "apps/host/buildAndServe.js": HOST_BUILD_SERVE,
+        "apps/host/app/layout.js": HOST_LAYOUT_JS,
+        "apps/host/app/page.js": HOST_PAGE_JS,
+      };
+    })(),
+  },
+  // ─── MFE + OpenTelemetry ───────────────────────────────────────────────────
+  {
+    id: "mfe-telemetry",
+    label: "MFE + OpenTelemetry: Distributed Tracing & Perf Budgets",
+    description:
+      "Instrument a host shell and two remotes with a hand-rolled OTEL-compatible tracer. Watch spans appear live in a trace waterfall, enforce render performance budgets, and simulate canary vs stable deployment telemetry.",
+    serverCode: `import express from 'express';
+const app = express();
+const port = Number(process.env.PORT);
+app.get('/api/health', (_req, res) => res.json({ ok: true }));
+app.listen(port, () => console.log('API :' + port));
+`,
+    clientCode: "",
+    clientType: "module-federation",
+    reactActiveFile: "apps/host/src/telemetry.js",
+    reactFiles: (() => {
+      // ─── Root ────────────────────────────────────────────────────────────
+      const ROOT_PACKAGE = `{
+  "name": "mfe-telemetry-lab",
+  "private": true,
+  "workspaces": ["apps/host", "apps/profile", "apps/checkout"],
+  "scripts": {
+    "dev": "concurrently -k -n host,profile,checkout -c cyan,magenta,yellow 'npm run dev --workspace=@mf-otel/host' 'npm run dev --workspace=@mf-otel/profile' 'npm run dev --workspace=@mf-otel/checkout'"
+  },
+  "devDependencies": {
+    "concurrently": "^9.2.1"
+  }
+}
+`;
+
+      // ─── Shared webpack devDeps (remote apps) ────────────────────────────
+      const REMOTE_DEPS = `{
+    "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.0"
+  }`;
+
+      // ─── Host ─────────────────────────────────────────────────────────────
+      const HOST_PACKAGE = `{
+  "name": "@mf-otel/host",
+  "private": true,
+  "scripts": { "dev": "webpack serve" },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": ${REMOTE_DEPS}
+}
+`;
+
+      const HOST_WEBPACK = `
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { ModuleFederationPlugin } = webpack.container;
+
+const HOST_PORT     = Number(process.env.HOST_PORT     || 3100);
+const PROFILE_PORT  = Number(process.env.PROFILE_PORT  || 3101);
+const CHECKOUT_PORT = Number(process.env.CHECKOUT_PORT || 3102);
+
+// ── In-memory span store for the embedded OTLP-like collector ─────────────────
+// In production: forward to Grafana Alloy / OpenTelemetry Collector / Jaeger.
+const spanStore = [];
+const MAX_SPANS = 2000;
+
+module.exports = {
+  mode: 'development',
+  entry: path.resolve(__dirname, './src/index.js'),
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: 'http://localhost:' + HOST_PORT + '/',
+    clean: true,
+  },
+  resolve: { extensions: ['.js', '.jsx'] },
+  module: {
+    rules: [{
+      test: /\\.jsx?$/,
+      exclude: /node_modules/,
+      use: { loader: 'esbuild-loader', options: { loader: 'jsx', jsx: 'automatic', target: 'es2020' } },
+    }],
+  },
+  plugins: [
+    // Inject the collector URL at build time so telemetry.js knows where to POST spans.
+    // Real OTEL: configured in OTLPTraceExporter({ url: '...' })
+    new webpack.DefinePlugin({
+      __COLLECTOR_URL__: JSON.stringify('/api/spans'),  // same-origin to host
+    }),
+    new ModuleFederationPlugin({
+      name: 'host',
+      filename: 'remoteEntry.js',
+      // Expose the shared tracer so every remote gets the SAME singleton TracerProvider.
+      // This is the key MFE pattern: shared identity across microfrontend boundaries.
+      exposes: { './telemetry': './src/telemetry.js' },
+      remotes: {
+        profile:  'profile@http://localhost:' + PROFILE_PORT + '/remoteEntry.js',
+        checkout: 'checkout@http://localhost:' + CHECKOUT_PORT + '/remoteEntry.js',
+      },
+      shared: {
+        react:       { singleton: true, requiredVersion: '^18.3.1' },
+        'react-dom': { singleton: true, requiredVersion: '^18.3.1' },
+      },
+    }),
+    new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html') }),
+  ],
+
+  devServer: {
+    port: HOST_PORT,
+    hot: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+
+    // ── Embedded OTLP-like span collector ────────────────────────────────────
+    // webpack-dev-server exposes an Express app via devServer.app.
+    // We intercept /api/spans here so spans go to the same origin as the host page
+    // (no extra server, no extra port, no CORS issues from the host itself).
+    setupMiddlewares(middlewares, devServer) {
+      devServer.app.use('/api/spans', (req, res) => {
+        // Remotes run on different ports so they need CORS to reach this endpoint.
+        res.setHeader('Access-Control-Allow-Origin', '*');
+        res.setHeader('Access-Control-Allow-Headers', 'content-type');
+        res.setHeader('Access-Control-Allow-Methods', 'GET,POST,DELETE,OPTIONS');
+        if (req.method === 'OPTIONS') { res.writeHead(204).end(); return; }
+
+        if (req.method === 'GET') {
+          res.setHeader('Content-Type', 'application/json');
+          res.end(JSON.stringify({ spans: spanStore }));
+          return;
+        }
+        if (req.method === 'DELETE') {
+          spanStore.length = 0;
+          res.setHeader('Content-Type', 'application/json');
+          res.end(JSON.stringify({ ok: true }));
+          return;
+        }
+        if (req.method === 'POST') {
+          let body = '';
+          req.on('data', c => { body += c; });
+          req.on('end', () => {
+            try {
+              const data = JSON.parse(body);
+              // Accept both { resourceSpans: [...] } (OTLP-like) and plain arrays
+              const incoming = Array.isArray(data.resourceSpans) ? data.resourceSpans
+                : Array.isArray(data) ? data : [data];
+              spanStore.push(...incoming);
+              if (spanStore.length > MAX_SPANS) spanStore.splice(0, spanStore.length - MAX_SPANS);
+              res.setHeader('Content-Type', 'application/json');
+              res.end(JSON.stringify({ ok: true, total: spanStore.length }));
+            } catch { res.writeHead(400).end('{"error":"bad json"}'); }
+          });
+          return;
+        }
+        res.writeHead(405).end();
+      });
+      return middlewares;
+    },
+  },
+};
+`;
+
+      const HOST_HTML = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>MFE Telemetry Lab</title>
+  </head>
+  <body style="margin:0">
+    <div id="root"></div>
+  </body>
+</html>
+`;
+
+      const HOST_INDEX_JS = `// Async boundary — required for Module Federation shared scope initialisation.
+// Real OTEL: same pattern in shared-singleton setups.
+import('./bootstrap');
+`;
+
+      const HOST_BOOTSTRAP = `import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+createRoot(document.getElementById('root')).render(React.createElement(App));
+`;
+
+      // ── THE KEY FILE ─────────────────────────────────────────────────────
+      const HOST_TELEMETRY = `
+/* ─────────────────────────────────────────────────────────────────────────────
+ * telemetry.js — Lightweight OTEL-compatible tracer for the MFE lab
+ *
+ * API surface mirrors @opentelemetry/api so switching to the real SDK is a
+ * drop-in replacement:
+ *
+ *   import { trace } from '@opentelemetry/api';
+ *   const tracer = trace.getTracer('mfe-host', '1.0.0');
+ *
+ * KEY CONCEPTS
+ * ─────────────
+ * Span     — a named unit of work: has duration, attributes, events, and status.
+ * Trace    — a chain of related spans sharing one 128-bit traceId.
+ * Context  — propagated between spans via W3C traceparent header.
+ * Export   — spans are batch-POSTed to an OTLP HTTP endpoint.
+ * Shared   — the host exposes this module; all remotes import the same singleton
+ *            so every span has the same TracerProvider and traceId scope.
+ * ───────────────────────────────────────────────────────────────────────────── */
+
+/* global __COLLECTOR_URL__ */
+const COLLECTOR_URL =
+  typeof __COLLECTOR_URL__ !== 'undefined' ? __COLLECTOR_URL__ : '/api/spans';
+
+function rndHex(bytes) {
+  return [...crypto.getRandomValues(new Uint8Array(bytes))]
+    .map(b => b.toString(16).padStart(2, '0'))
+    .join('');
+}
+
+// ── Span ──────────────────────────────────────────────────────────────────────
+// Mirrors the shape of @opentelemetry/sdk-trace-base:ReadableSpan.
+class Span {
+  constructor({ name, service, traceId, parentSpanId, version, deployEnv }) {
+    // W3C TraceContext fields:
+    //   traceId     = 128-bit hex — ONE value shared across ALL services in a trace
+    //   spanId      = 64-bit hex  — unique per span
+    //   parentSpanId= 64-bit hex  — null for root span, links child to parent
+    this.traceId      = traceId || rndHex(16);
+    this.spanId       = rndHex(8);
+    this.parentSpanId = parentSpanId || null;
+
+    this.name         = name;
+    this.service      = service;
+    this.startTimeMs  = Date.now();
+    this._perfStart   = performance.now();   // high-res timer for accurate duration
+
+    // OTEL semantic-convention attributes (prefix keys like 'service.name', 'http.method')
+    this.attributes = {
+      'service.name':           service,
+      'deployment.version':     version || '1.0.0',
+      'deployment.environment': deployEnv || 'dev',
+    };
+
+    // Events = timestamped annotations within the span (e.g. 'cache.miss', 'retry.1')
+    this.events = [];
+
+    // Status: UNSET → OK (on end) or ERROR (explicit setStatus)
+    this.status = { code: 'UNSET' };
+    this.ended  = false;
+  }
+
+  // Add arbitrary key/value metadata.
+  // Best practice: use OpenTelemetry Semantic Convention keys where possible.
+  setAttribute(key, value) { this.attributes[key] = value; return this; }
+
+  // Record a named moment in time. Offset is relative to span start.
+  addEvent(name, attrs = {}) {
+    this.events.push({ name, offsetMs: performance.now() - this._perfStart, attributes: attrs });
+    return this;
+  }
+
+  // Mark this span OK or ERROR.
+  // ERROR spans are flagged in dashboards and can trigger alerts in real systems.
+  setStatus(code, message = '') { this.status = { code, message }; return this; }
+
+  // Finish the span. Computes duration and enqueues it for export.
+  end() {
+    if (this.ended) return this;
+    this.ended      = true;
+    this.durationMs = performance.now() - this._perfStart;
+    this.endTimeMs  = Date.now();
+    if (this.status.code === 'UNSET') this.setStatus('OK');
+    _enqueue(this.toJSON());
+    return this;
+  }
+
+  // Produce W3C traceparent header string.
+  // Include this on outgoing HTTP requests so backend services can create child spans
+  // under the same traceId — this is what makes traces cross service boundaries.
+  // Format: "00-{32-hex-traceId}-{16-hex-spanId}-01"
+  toTraceparent() { return '00-' + this.traceId + '-' + this.spanId + '-01'; }
+
+  toJSON() {
+    return {
+      traceId: this.traceId, spanId: this.spanId,
+      parentSpanId: this.parentSpanId,
+      name: this.name, service: this.service,
+      startTimeMs: this.startTimeMs, endTimeMs: this.endTimeMs,
+      durationMs: this.durationMs,
+      attributes: { ...this.attributes },
+      events: [...this.events],
+      status: { ...this.status },
+    };
+  }
+}
+
+// ── Export pipeline ───────────────────────────────────────────────────────────
+// Mimics OpenTelemetry's BatchSpanProcessor:
+//   spans accumulate in a queue; a timer flushes them as a batch every 300ms.
+// Real OTEL:
+//   new BatchSpanProcessor(new OTLPTraceExporter({ url: COLLECTOR_URL }))
+const _queue = [];
+let _flushTimer = null;
+
+function _enqueue(span) {
+  _queue.push(span);
+  if (!_flushTimer) _flushTimer = setTimeout(_flush, 300);
+}
+
+async function _flush() {
+  _flushTimer = null;
+  if (!_queue.length) return;
+  const batch = _queue.splice(0);
+  try {
+    // Sends an OTLP-compatible JSON payload.
+    // Real OTLP uses protobuf but the HTTP/JSON format is identical in structure.
+    await fetch(COLLECTOR_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ resourceSpans: batch }),
+      keepalive: true,  // span survives page navigation (like visibilitychange export)
+    });
+  } catch {
+    // Never let telemetry failure crash the app — silently drop on network error.
+  }
+}
+
+// Flush any remaining spans when the page is hidden (tab switch / close)
+if (typeof window !== 'undefined') {
+  window.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'hidden') _flush();
+  });
+}
+
+// ── Tracer ────────────────────────────────────────────────────────────────────
+// Real OTEL: obtained via  trace.getTracer('service-name', '1.0.0')
+class Tracer {
+  constructor({ serviceName, version, deployEnv }) {
+    this.serviceName = serviceName;
+    this.version     = version || '1.0.0';
+    this.deployEnv   = deployEnv || 'dev';
+  }
+
+  // Start a span.
+  // Pass parentSpan to create a child span — it inherits the traceId.
+  startSpan(name, { parentSpan, attributes } = {}) {
+    const span = new Span({
+      name,
+      service:      this.serviceName,
+      traceId:      parentSpan ? parentSpan.traceId : undefined,
+      parentSpanId: parentSpan ? parentSpan.spanId  : undefined,
+      version:      this.version,
+      deployEnv:    this.deployEnv,
+    });
+    if (attributes) Object.entries(attributes).forEach(([k, v]) => span.setAttribute(k, v));
+    return span;
+  }
+
+  // Convenience wrapper: automatically ends span (OK or ERROR) after fn() completes.
+  async withSpan(name, fn, opts = {}) {
+    const span = this.startSpan(name, opts);
+    try { return await fn(span); }
+    catch (err) { span.setStatus('ERROR', err.message); throw err; }
+    finally { span.end(); }
+  }
+
+  // Create a tracer for a remote MFE.
+  // In real OTEL: all MFEs call trace.getTracer() on the SAME global TracerProvider
+  // (set up once by the host). The childTracer pattern approximates this.
+  childTracer(svc) { return new Tracer({ serviceName: svc, version: this.version, deployEnv: this.deployEnv }); }
+
+  // Update version at runtime — used by the canary toggle in App.jsx.
+  setVersion(v) { this.version   = v; }
+  setEnv(e)     { this.deployEnv = e; }
+}
+
+// ── Singleton provider ────────────────────────────────────────────────────────
+// The host calls initTelemetry() once at startup.
+// Remotes call getTracer() and receive a child tracer sharing the same provider.
+// This mirrors how WebTracerProvider works: one provider, many tracers.
+let _provider = null;
+
+export function initTelemetry({ serviceName = 'mfe-host', version = '1.0.0', deployEnv = 'dev' } = {}) {
+  _provider = new Tracer({ serviceName, version, deployEnv });
+  if (typeof window !== 'undefined') {
+    // Expose for DevTools exploration: window.__mfeTelemetry.startSpan('test').end()
+    window.__mfeTelemetry = _provider;
+  }
+  return _provider;
+}
+
+export function getTracer(serviceName) {
+  if (!_provider) {
+    // Remote loaded before host telemetry initialised — create a fallback provider.
+    // Real OTEL: the global NoopTracerProvider handles this automatically.
+    _provider = new Tracer({ serviceName: 'uninitialized' });
+  }
+  return serviceName ? _provider.childTracer(serviceName) : _provider;
+}
+
+// Parse a W3C traceparent header from an incoming request (server-side use)
+export function parseTraceparent(header) {
+  if (!header) return null;
+  const parts = header.split('-');
+  return parts.length >= 3 ? { traceId: parts[1], spanId: parts[2] } : null;
+}
+
+// Force-flush (useful in tests or before page unload)
+export function flush() { return _flush(); }
+`;
+
+      // ── App.jsx ──────────────────────────────────────────────────────────
+      const HOST_APP = `
+import React, { useState, useEffect, Suspense } from 'react';
+import { initTelemetry } from './telemetry.js';
+import TraceDashboard from './TraceDashboard.jsx';
+
+// ── TracerProvider initialisation ────────────────────────────────────────────
+// This runs once, synchronously, before any component renders.
+// Real OTEL:
+//   const provider = new WebTracerProvider({ resource: Resource.default().merge(...) });
+//   provider.addSpanProcessor(new BatchSpanProcessor(new OTLPTraceExporter(...)));
+//   provider.register();
+const hostTracer = initTelemetry({ serviceName: 'mfe-host', version: '1.0.0' });
+
+// Lazy-load remotes. React.lazy + Suspense gives us the async boundary.
+// Wrap each import in a span to measure the actual module-federation resolution time.
+const ProfileCard  = React.lazy(() => {
+  const span = hostTracer.startSpan('host.loadRemote', { attributes: { 'mfe.remote': 'profile' } });
+  return import('profile/ProfileCard')
+    .then(m  => { span.setAttribute('mfe.load_status', 'ok').end(); return m; })
+    .catch(e => { span.setStatus('ERROR', e.message).end(); throw e; });
+});
+
+const CheckoutPanel = React.lazy(() => {
+  const span = hostTracer.startSpan('host.loadRemote', { attributes: { 'mfe.remote': 'checkout' } });
+  return import('checkout/CheckoutPanel')
+    .then(m  => { span.setAttribute('mfe.load_status', 'ok').end(); return m; })
+    .catch(e => { span.setStatus('ERROR', e.message).end(); throw e; });
+});
+
+// ── Canary version options ────────────────────────────────────────────────────
+// In a real canary deploy, 'deployment.version' lets you split span queries:
+//   error_rate{deployment_version="2.0.0"} > error_rate{deployment_version="1.0.0"}
+// → rollback automatically if canary is worse
+const VERSIONS = [
+  { value: '1.0.0', label: 'v1.0.0 stable',   note: '' },
+  { value: '2.0.0', label: 'v2.0.0 canary 🐦', note: 'Emits higher error rate in checkout' },
+];
+
+export default function App() {
+  const [version, setVersion]           = useState('1.0.0');
+  const [showProfile, setShowProfile]   = useState(false);
+  const [showCheckout, setShowCheckout] = useState(false);
+
+  // Push version change through to all tracers so every new span gets the right tag
+  useEffect(() => { hostTracer.setVersion(version); }, [version]);
+
+  function handleActivateRemote(name) {
+    const span = hostTracer.startSpan('host.activateRemote', {
+      attributes: { 'mfe.remote': name, 'user.action': 'click' },
+    });
+    span.addEvent('remote.activation.requested');
+    // The actual remote load time is recorded inside the React.lazy thunk above
+    if (name === 'profile')  setShowProfile(true);
+    if (name === 'checkout') setShowCheckout(true);
+    span.end();
+  }
+
+  function handleApiCall() {
+    // Demonstrates W3C traceparent propagation to a backend service
+    const span = hostTracer.startSpan('host.apiCall', {
+      attributes: { 'http.method': 'GET', 'http.url': '/api/user/me' },
+    });
+    const traceparent = span.toTraceparent();
+    // In real code you'd pass this header on the fetch():
+    //   fetch('/api/user/me', { headers: { traceparent } })
+    // The backend creates a CHILD span with parentSpanId = this span's spanId.
+    console.log('[Telemetry] Outbound fetch headers:');
+    console.log('  traceparent:', traceparent);
+    console.log('  → backend would emit a child span under traceId:', span.traceId);
+    span.addEvent('fetch.started', { 'http.url': '/api/user/me' });
+    setTimeout(() => {
+      span.setAttribute('http.status_code', 200).addEvent('fetch.completed').end();
+    }, 120);
+  }
+
+  return (
+    <div style={{ minHeight: '100vh', background: 'linear-gradient(135deg,#0f172a,#1e293b)', color: '#e2e8f0', fontFamily: 'ui-sans-serif,system-ui,sans-serif', padding: '1.5rem' }}>
+
+      {/* Header */}
+      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
+        <p style={{ margin: '0 0 0.25rem', color: '#38bdf8', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
+          OpenTelemetry · Module Federation
+        </p>
+        <h1 style={{ margin: '0 0 0.5rem', fontSize: '1.6rem', fontWeight: 700 }}>
+          MFE Distributed Tracing Lab
+        </h1>
+        <p style={{ margin: '0 0 1.5rem', color: '#94a3b8', fontSize: '0.875rem', maxWidth: '60ch' }}>
+          Each button below creates a span. Spans from all three microfrontends share one
+          <code style={{ background: '#1e293b', padding: '0 4px', borderRadius: '3px' }}>traceId</code>
+          so the dashboard below can show the full trace waterfall.
+        </p>
+
+        {/* Canary toggle */}
+        <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.75rem', background: '#1e293b', border: '1px solid #334155', borderRadius: '0.75rem', padding: '0.6rem 1rem', marginBottom: '1.5rem' }}>
+          <span style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Deployment version:</span>
+          <select
+            value={version}
+            onChange={e => setVersion(e.target.value)}
+            style={{ background: '#0f172a', color: '#e2e8f0', border: '1px solid #475569', borderRadius: '0.4rem', padding: '0.25rem 0.5rem', fontSize: '0.8rem', cursor: 'pointer' }}
+          >
+            {VERSIONS.map(v => (
+              <option key={v.value} value={v.value}>{v.label}</option>
+            ))}
+          </select>
+          {version === '2.0.0' && (
+            <span style={{ fontSize: '0.7rem', color: '#f59e0b', background: '#451a03', padding: '2px 8px', borderRadius: '999px' }}>
+              checkout simulates 20% error rate — watch dashboard for red spans
+            </span>
+          )}
+        </div>
+
+        {/* Action row */}
+        <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', marginBottom: '1.5rem' }}>
+          {[
+            { label: showProfile ? 'Profile loaded ✓' : 'Load Profile Remote', action: () => handleActivateRemote('profile'), active: showProfile },
+            { label: showCheckout ? 'Checkout loaded ✓' : 'Load Checkout Remote', action: () => handleActivateRemote('checkout'), active: showCheckout },
+            { label: 'Make API call (see console)', action: handleApiCall, active: false },
+          ].map(btn => (
+            <button
+              key={btn.label}
+              onClick={btn.action}
+              disabled={btn.active}
+              style={{ padding: '0.5rem 1rem', borderRadius: '0.5rem', border: 'none', cursor: btn.active ? 'default' : 'pointer', fontWeight: 600, fontSize: '0.8rem', background: btn.active ? '#1e293b' : '#0ea5e9', color: btn.active ? '#64748b' : '#fff', transition: 'opacity 0.15s' }}
+            >
+              {btn.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Explainer */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: '0.75rem', marginBottom: '1.5rem' }}>
+          {[
+            { title: 'Span', body: 'A named unit of work with start/end time, attributes, and status. Created by startSpan(), finished by span.end().' },
+            { title: 'Trace', body: 'A group of spans sharing one traceId. Makes it trivial to see what happened across host + all remotes for one user action.' },
+            { title: 'W3C traceparent', body: 'The traceparent header carries traceId+spanId across HTTP boundaries. Backend creates child spans under the same traceId.' },
+            { title: 'Performance budget', body: 'checkout enforces a 50ms render budget. Exceed it → span gets status ERROR so dashboards and alerts fire. Canary v2 can simulate this.' },
+          ].map(c => (
+            <div key={c.title} style={{ background: '#1e293b', border: '1px solid #334155', borderRadius: '0.75rem', padding: '0.75rem 1rem' }}>
+              <p style={{ margin: '0 0 0.25rem', color: '#38bdf8', fontSize: '0.7rem', fontWeight: 700, textTransform: 'uppercase' }}>{c.title}</p>
+              <p style={{ margin: 0, color: '#94a3b8', fontSize: '0.78rem', lineHeight: 1.5 }}>{c.body}</p>
+            </div>
+          ))}
+        </div>
+
+        {/* Remote panels */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(320px,1fr))', gap: '1rem', marginBottom: '1.5rem' }}>
+          <Suspense fallback={<RemotePlaceholder name="profile" />}>
+            {showProfile && <ProfileCard deploymentVersion={version} />}
+          </Suspense>
+          <Suspense fallback={<RemotePlaceholder name="checkout" />}>
+            {showCheckout && <CheckoutPanel deploymentVersion={version} />}
+          </Suspense>
+        </div>
+
+        {/* Live trace dashboard */}
+        <TraceDashboard />
+      </div>
+    </div>
+  );
+}
+
+function RemotePlaceholder({ name }) {
+  return (
+    <div style={{ background: '#1e293b', border: '1px dashed #334155', borderRadius: '0.75rem', padding: '1.5rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <span style={{ color: '#475569', fontSize: '0.8rem' }}>Loading {name} remote…</span>
+    </div>
+  );
+}
+`;
+
+      // ── TraceDashboard.jsx ────────────────────────────────────────────────
+      const HOST_TRACE_DASHBOARD = `
+import React, { useState, useEffect, useRef } from 'react';
+
+function groupByTrace(spans) {
+  const map = new Map();
+  for (const s of spans) {
+    if (!map.has(s.traceId)) map.set(s.traceId, []);
+    map.get(s.traceId).push(s);
+  }
+  // Sort traces: most recent first
+  return [...map.entries()]
+    .map(([traceId, spans]) => ({ traceId, spans: spans.sort((a, b) => a.startTimeMs - b.startTimeMs) }))
+    .sort((a, b) => b.spans[0].startTimeMs - a.spans[0].startTimeMs);
+}
+
+const SVC_COLORS = {
+  'mfe-host':      '#38bdf8',
+  'profile-remote':'#a78bfa',
+  'checkout-remote':'#fb923c',
+};
+function svcColor(svc) { return SVC_COLORS[svc] || '#94a3b8'; }
+
+export default function TraceDashboard() {
+  const [spans, setSpans]           = useState([]);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [expanded, setExpanded]     = useState(null);  // traceId of expanded row
+  const [selected, setSelected]     = useState(null);  // clicked span for detail
+  const endRef = useRef(null);
+
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const id = setInterval(async () => {
+      try {
+        const data = await fetch('/api/spans').then(r => r.json());
+        setSpans(data.spans || []);
+      } catch {}
+    }, 800);
+    return () => clearInterval(id);
+  }, [autoRefresh]);
+
+  const clearAll = async () => {
+    await fetch('/api/spans', { method: 'DELETE' });
+    setSpans([]); setExpanded(null); setSelected(null);
+  };
+
+  const exportSpans = () => {
+    const blob = new Blob([JSON.stringify(spans, null, 2)], { type: 'application/json' });
+    const url  = URL.createObjectURL(blob);
+    const a    = document.createElement('a');
+    a.href = url; a.download = 'spans.json'; a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const traces   = groupByTrace(spans);
+  const errCount = spans.filter(s => s.status?.code === 'ERROR').length;
+
+  return (
+    <div style={{ background: '#0f172a', border: '1px solid #1e293b', borderRadius: '1rem', padding: '1rem', fontSize: '0.8rem' }}>
+      {/* Toolbar */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.75rem', flexWrap: 'wrap' }}>
+        <span style={{ color: '#38bdf8', fontWeight: 700, fontSize: '0.85rem' }}>🔭 Live Trace Dashboard</span>
+        <span style={{ color: '#64748b' }}>{spans.length} spans · {traces.length} traces</span>
+        {errCount > 0 && (
+          <span style={{ background: '#450a0a', color: '#f87171', padding: '2px 8px', borderRadius: '999px', fontSize: '0.7rem', fontWeight: 700 }}>
+            {errCount} ERROR{errCount > 1 ? 'S' : ''}
+          </span>
+        )}
+        <div style={{ marginLeft: 'auto', display: 'flex', gap: '0.5rem' }}>
+          <TinyBtn onClick={() => setAutoRefresh(a => !a)} label={autoRefresh ? '⏸ Pause' : '▶ Resume'} />
+          <TinyBtn onClick={clearAll} label="🗑 Clear" />
+          <TinyBtn onClick={exportSpans} label="⬇ Export JSON" />
+        </div>
+      </div>
+
+      {/* Legend */}
+      <div style={{ display: 'flex', gap: '1rem', marginBottom: '0.75rem', flexWrap: 'wrap' }}>
+        {Object.entries(SVC_COLORS).map(([svc, col]) => (
+          <span key={svc} style={{ display: 'flex', alignItems: 'center', gap: '4px', color: '#94a3b8', fontSize: '0.7rem' }}>
+            <span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: 2, background: col }} />
+            {svc}
+          </span>
+        ))}
+        <span style={{ display: 'flex', alignItems: 'center', gap: '4px', color: '#94a3b8', fontSize: '0.7rem' }}>
+          <span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: 2, background: '#ef4444' }} />
+          ERROR / budget exceeded
+        </span>
+      </div>
+
+      {traces.length === 0 ? (
+        <p style={{ color: '#334155', fontStyle: 'italic', textAlign: 'center', padding: '2rem 0' }}>
+          No spans yet — click a button above to generate some.
+        </p>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+          {traces.map(trace => (
+            <TraceRow
+              key={trace.traceId}
+              trace={trace}
+              isExpanded={expanded === trace.traceId}
+              selected={selected}
+              onToggle={() => setExpanded(e => e === trace.traceId ? null : trace.traceId)}
+              onSelectSpan={setSelected}
+            />
+          ))}
+        </div>
+      )}
+      <div ref={endRef} />
+    </div>
+  );
+}
+
+function TraceRow({ trace, isExpanded, selected, onToggle, onSelectSpan }) {
+  const firstMs   = trace.spans[0].startTimeMs;
+  const lastMs    = Math.max(...trace.spans.map(s => s.endTimeMs || s.startTimeMs));
+  const traceDurMs = Math.max(lastMs - firstMs, 1);
+  const hasError  = trace.spans.some(s => s.status?.code === 'ERROR');
+  const services  = [...new Set(trace.spans.map(s => s.service))];
+
+  return (
+    <div style={{ border: '1px solid ' + (hasError ? '#7f1d1d' : '#1e293b'), borderRadius: '0.5rem', overflow: 'hidden' }}>
+      <div
+        onClick={onToggle}
+        style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.4rem 0.75rem', background: hasError ? '#1c0a0a' : '#0f172a', cursor: 'pointer', userSelect: 'none' }}
+      >
+        <span style={{ color: '#475569', fontSize: '0.65rem' }}>{isExpanded ? '▼' : '▶'}</span>
+        <code style={{ color: hasError ? '#f87171' : '#38bdf8', fontSize: '0.72rem' }}>
+          {trace.traceId.slice(0, 8)}…
+        </code>
+        <span style={{ color: '#64748b', fontSize: '0.7rem' }}>
+          {trace.spans.length} span{trace.spans.length > 1 ? 's' : ''}
+        </span>
+        <div style={{ display: 'flex', gap: '3px' }}>
+          {services.map(svc => (
+            <span key={svc} style={{ background: svcColor(svc) + '33', color: svcColor(svc), padding: '1px 6px', borderRadius: '999px', fontSize: '0.6rem', fontWeight: 600 }}>
+              {svc.replace('-remote', '')}
+            </span>
+          ))}
+        </div>
+        <span style={{ color: '#475569', fontSize: '0.7rem', marginLeft: 'auto' }}>
+          {traceDurMs.toFixed(0)}ms total
+        </span>
+        {hasError && (
+          <span style={{ color: '#ef4444', fontSize: '0.7rem', fontWeight: 700 }}>⚠ ERROR</span>
+        )}
+      </div>
+
+      {isExpanded && (
+        <div style={{ padding: '0.5rem 0.75rem', background: '#0b1120', display: 'flex', flexDirection: 'column', gap: '4px' }}>
+          {trace.spans.map(span => {
+            const left  = ((span.startTimeMs - firstMs) / traceDurMs) * 100;
+            const width = Math.max(((span.durationMs || 0) / traceDurMs) * 100, 1);
+            const isErr = span.status?.code === 'ERROR';
+            const bar   = isErr ? '#ef4444' : span.parentSpanId ? svcColor(span.service) : '#22c55e';
+            const isSel = selected?.spanId === span.spanId;
+
+            return (
+              <div key={span.spanId} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }} onClick={() => onSelectSpan(isSel ? null : span)}>
+                <span style={{ width: '22ch', flexShrink: 0, fontFamily: 'monospace', fontSize: '0.65rem', color: svcColor(span.service), overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {span.service.replace('-remote','')}:{span.name}
+                </span>
+                <div style={{ flex: 1, height: '12px', background: '#1e293b', borderRadius: '2px', position: 'relative' }}>
+                  <div style={{ position: 'absolute', left: left + '%', width: width + '%', height: '100%', background: bar, borderRadius: '2px', minWidth: '4px', border: isSel ? '1px solid #fff' : 'none' }}
+                    title={span.name + ': ' + (span.durationMs || 0).toFixed(1) + 'ms'} />
+                </div>
+                <span style={{ width: '6ch', textAlign: 'right', fontFamily: 'monospace', fontSize: '0.65rem', color: isErr ? '#ef4444' : '#64748b', flexShrink: 0 }}>
+                  {(span.durationMs || 0).toFixed(1)}ms
+                </span>
+              </div>
+            );
+          })}
+
+          {/* Selected span detail panel */}
+          {selected && trace.spans.find(s => s.spanId === selected.spanId) && (
+            <SpanDetail span={selected} onClose={() => onSelectSpan(null)} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SpanDetail({ span, onClose }) {
+  return (
+    <div style={{ marginTop: '0.5rem', background: '#1e293b', border: '1px solid #334155', borderRadius: '0.5rem', padding: '0.75rem', fontSize: '0.7rem' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+        <strong style={{ color: '#e2e8f0' }}>{span.name}</strong>
+        <button onClick={onClose} style={{ background: 'none', border: 'none', color: '#64748b', cursor: 'pointer', fontSize: '0.8rem' }}>✕</button>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'max-content 1fr', gap: '3px 12px', color: '#94a3b8' }}>
+        <span>traceId</span><code style={{ color: '#38bdf8', wordBreak: 'break-all' }}>{span.traceId}</code>
+        <span>spanId</span><code style={{ color: '#a78bfa' }}>{span.spanId}</code>
+        {span.parentSpanId && <><span>parentSpanId</span><code style={{ color: '#64748b' }}>{span.parentSpanId}</code></>}
+        <span>traceparent</span><code style={{ color: '#94a3b8', fontSize: '0.6rem', wordBreak: 'break-all' }}>{'00-' + span.traceId + '-' + span.spanId + '-01'}</code>
+        <span>duration</span><span style={{ color: span.status?.code === 'ERROR' ? '#ef4444' : '#22c55e' }}>{(span.durationMs || 0).toFixed(2)}ms</span>
+        <span>status</span>
+        <span style={{ color: span.status?.code === 'ERROR' ? '#ef4444' : span.status?.code === 'OK' ? '#22c55e' : '#94a3b8' }}>
+          {span.status?.code}{span.status?.message ? ' — ' + span.status.message : ''}
+        </span>
+      </div>
+      {Object.keys(span.attributes || {}).length > 0 && (
+        <div style={{ marginTop: '0.5rem' }}>
+          <p style={{ margin: '0 0 3px', color: '#475569', textTransform: 'uppercase', letterSpacing: '0.06em', fontSize: '0.6rem' }}>Attributes</p>
+          {Object.entries(span.attributes).map(([k, v]) => (
+            <div key={k} style={{ display: 'flex', gap: '8px' }}>
+              <code style={{ color: '#64748b', flexShrink: 0 }}>{k}</code>
+              <code style={{ color: '#e2e8f0' }}>{String(v)}</code>
+            </div>
+          ))}
+        </div>
+      )}
+      {(span.events || []).length > 0 && (
+        <div style={{ marginTop: '0.5rem' }}>
+          <p style={{ margin: '0 0 3px', color: '#475569', textTransform: 'uppercase', letterSpacing: '0.06em', fontSize: '0.6rem' }}>Events</p>
+          {span.events.map((e, i) => (
+            <div key={i} style={{ display: 'flex', gap: '8px' }}>
+              <code style={{ color: '#64748b' }}>{e.offsetMs?.toFixed(1)}ms</code>
+              <code style={{ color: '#e2e8f0' }}>{e.name}</code>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TinyBtn({ onClick, label }) {
+  return (
+    <button onClick={onClick} style={{ padding: '3px 10px', borderRadius: '0.35rem', border: '1px solid #334155', background: '#1e293b', color: '#94a3b8', cursor: 'pointer', fontSize: '0.72rem' }}>
+      {label}
+    </button>
+  );
+}
+`;
+
+      // ─── Profile remote ───────────────────────────────────────────────────
+      const PROFILE_PACKAGE = `{
+  "name": "@mf-otel/profile",
+  "private": true,
+  "scripts": { "dev": "webpack serve" },
+  "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1" },
+  "devDependencies": ${REMOTE_DEPS}
+}
+`;
+
+      const PROFILE_WEBPACK = `
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { ModuleFederationPlugin } = webpack.container;
+
+const HOST_PORT    = Number(process.env.HOST_PORT    || 3100);
+const PROFILE_PORT = Number(process.env.PROFILE_PORT || 3101);
+
+module.exports = {
+  mode: 'development',
+  entry: path.resolve(__dirname, './src/index.js'),
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: 'http://localhost:' + PROFILE_PORT + '/',
+    clean: true,
+  },
+  resolve: { extensions: ['.js', '.jsx'] },
+  module: {
+    rules: [{
+      test: /\\.jsx?$/, exclude: /node_modules/,
+      use: { loader: 'esbuild-loader', options: { loader: 'jsx', jsx: 'automatic', target: 'es2020' } },
+    }],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'profile',
+      filename: 'remoteEntry.js',
+      exposes: { './ProfileCard': './src/ProfileCard.jsx' },
+      // Import the host's shared telemetry module so this remote's spans
+      // are created by the SAME TracerProvider as the host.
+      remotes: { host: 'host@http://localhost:' + HOST_PORT + '/remoteEntry.js' },
+      shared: {
+        react:       { singleton: true, requiredVersion: '^18.3.1' },
+        'react-dom': { singleton: true, requiredVersion: '^18.3.1' },
+      },
+    }),
+    new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html') }),
+  ],
+  devServer: {
+    port: PROFILE_PORT,
+    hot: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+  },
+};
+`;
+
+      const REMOTE_HTML = (title: string) => `<!doctype html>
+<html lang="en">
+  <head><meta charset="utf-8" /><title>${title}</title></head>
+  <body style="margin:0"><div id="root"></div></body>
+</html>
+`;
+      const REMOTE_INDEX = `import('./bootstrap');`;
+      const REMOTE_BOOTSTRAP = (component: string) => `
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import ${component} from './${component}.jsx';
+const root = document.getElementById('root');
+if (root) createRoot(root).render(React.createElement(${component}));
+`;
+
+      const PROFILE_CARD = `
+import React, { useEffect, useRef } from 'react';
+// Import telemetry from the HOST's singleton provider via Module Federation.
+// This is the key pattern: every MFE shares one TracerProvider so all spans
+// belong to the same trace when triggered by the same user action.
+import { getTracer } from 'host/telemetry';
+
+const tracer = getTracer('profile-remote');
+
+export default function ProfileCard({ deploymentVersion }) {
+  // Start the render span synchronously (outside useEffect) so startTimeMs
+  // is captured before the first render pass, not after paint.
+  const spanRef = useRef(null);
+  if (!spanRef.current) {
+    spanRef.current = tracer.startSpan('profile.render', {
+      attributes: {
+        'component': 'ProfileCard',
+        'mfe.name':  'profile',
+      },
+    });
+  }
+
+  useEffect(() => {
+    // Component mounted — end the render span now we have a real DOM node.
+    spanRef.current
+      .setAttribute('deploy.version', deploymentVersion || '1.0.0')
+      .addEvent('component.mounted')
+      .setStatus('OK')
+      .end();
+  }, []);
+
+  function handleInteraction(action) {
+    // Child span — inherits the trace by passing parentSpan.
+    // Without parentSpan, this would start a NEW trace (a common mistake).
+    const parent = spanRef.current;
+    const span = tracer.startSpan('profile.interaction', {
+      parentSpan: parent.ended ? null : parent,
+      attributes: { 'user.action': action },
+    });
+    span.addEvent('click.handled').end();
+  }
+
+  return (
+    <div style={{ background: 'linear-gradient(135deg,#2e1065,#1e1b4b)', border: '1px solid #5b21b6', borderRadius: '0.75rem', padding: '1.25rem', fontFamily: 'ui-sans-serif,system-ui,sans-serif' }}>
+      <p style={{ margin: '0 0 0.25rem', color: '#a78bfa', fontSize: '0.65rem', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
+        profile remote · instrumented with OTEL-compatible tracer
+      </p>
+      <h2 style={{ margin: '0 0 0.75rem', color: '#ede9fe', fontSize: '1.1rem' }}>
+        User Profile
+      </h2>
+      <p style={{ margin: '0 0 1rem', color: '#c4b5fd', fontSize: '0.82rem', lineHeight: 1.5 }}>
+        This component started a span when it mounted. The span's traceId matches the
+        host's "loadRemote" span — same trace, different service.
+      </p>
+      <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+        {['View profile', 'Edit avatar', 'Sign out'].map(action => (
+          <button
+            key={action}
+            onClick={() => handleInteraction(action)}
+            style={{ padding: '0.3rem 0.75rem', background: '#4c1d95', border: '1px solid #6d28d9', borderRadius: '0.4rem', color: '#ddd6fe', fontSize: '0.75rem', cursor: 'pointer' }}
+          >
+            {action}
+          </button>
+        ))}
+      </div>
+      <p style={{ margin: '0.75rem 0 0', color: '#6d28d9', fontSize: '0.7rem' }}>
+        Each button click creates a child span → check the dashboard
+      </p>
+    </div>
+  );
+}
+`;
+
+      // ─── Checkout remote ──────────────────────────────────────────────────
+      const CHECKOUT_PACKAGE = `{
+  "name": "@mf-otel/checkout",
+  "private": true,
+  "scripts": { "dev": "webpack serve" },
+  "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1" },
+  "devDependencies": ${REMOTE_DEPS}
+}
+`;
+
+      const CHECKOUT_WEBPACK = `
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+const { ModuleFederationPlugin } = webpack.container;
+
+const HOST_PORT     = Number(process.env.HOST_PORT     || 3100);
+const CHECKOUT_PORT = Number(process.env.CHECKOUT_PORT || 3102);
+
+module.exports = {
+  mode: 'development',
+  entry: path.resolve(__dirname, './src/index.js'),
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: 'http://localhost:' + CHECKOUT_PORT + '/',
+    clean: true,
+  },
+  resolve: { extensions: ['.js', '.jsx'] },
+  module: {
+    rules: [{
+      test: /\\.jsx?$/, exclude: /node_modules/,
+      use: { loader: 'esbuild-loader', options: { loader: 'jsx', jsx: 'automatic', target: 'es2020' } },
+    }],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'checkout',
+      filename: 'remoteEntry.js',
+      exposes: { './CheckoutPanel': './src/CheckoutPanel.jsx' },
+      remotes: { host: 'host@http://localhost:' + HOST_PORT + '/remoteEntry.js' },
+      shared: {
+        react:       { singleton: true, requiredVersion: '^18.3.1' },
+        'react-dom': { singleton: true, requiredVersion: '^18.3.1' },
+      },
+    }),
+    new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html') }),
+  ],
+  devServer: {
+    port: CHECKOUT_PORT,
+    hot: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+  },
+};
+`;
+
+      const CHECKOUT_PANEL = `
+import React, { useEffect, useRef, useState } from 'react';
+import { getTracer } from 'host/telemetry';
+
+const tracer = getTracer('checkout-remote');
+
+// ── Performance budget ────────────────────────────────────────────────────────
+// Any render exceeding BUDGET_MS gets an ERROR span.
+// Lower this to 10ms to always trigger it. Raise to 200 to never trigger normally.
+// This is how teams enforce "checkout must render in < 50ms" at the telemetry level.
+const BUDGET_MS = 50;
+
+export default function CheckoutPanel({ deploymentVersion }) {
+  const renderSpanRef = useRef(null);
+  const mountPerfRef  = useRef(performance.now());
+  const [items, setItems]       = useState([{ name: 'Laptop', qty: 1, price: 999 }]);
+  const [slowResult, setSlowResult] = useState(null);
+
+  if (!renderSpanRef.current) {
+    renderSpanRef.current = tracer.startSpan('checkout.render', {
+      attributes: { 'component': 'CheckoutPanel', 'mfe.name': 'checkout' },
+    });
+  }
+
+  useEffect(() => {
+    const durationMs = performance.now() - mountPerfRef.current;
+    const span = renderSpanRef.current;
+
+    span.setAttribute('render.duration_ms', durationMs);
+    span.setAttribute('perf.budget_ms', BUDGET_MS);
+    span.setAttribute('deploy.version', deploymentVersion || '1.0.0');
+    span.addEvent('component.mounted', { duration_ms: durationMs });
+
+    // ── PERFORMANCE BUDGET ENFORCEMENT ────────────────────────────────────
+    if (durationMs > BUDGET_MS) {
+      span.setStatus('ERROR',
+        'Render exceeded ' + BUDGET_MS + 'ms budget (actual: ' + durationMs.toFixed(1) + 'ms)'
+      );
+      span.setAttribute('perf.budget_exceeded', true);
+    } else {
+      span.setStatus('OK');
+      span.setAttribute('perf.budget_exceeded', false);
+    }
+    span.end();
+  }, []);
+
+  function simulateSlowRender() {
+    // Artificially block the JS thread to guarantee a budget violation next render.
+    setSlowResult(null);
+    const parent = tracer.startSpan('checkout.slowRenderTest', {
+      attributes: { 'test.type': 'perf_budget_violation' },
+    });
+    parent.addEvent('blocking.started');
+
+    // Synchronous busy-wait to simulate real slow work (DOM layout, heavy computation)
+    const start = performance.now();
+    while (performance.now() - start < BUDGET_MS + 30) { /* block */ }
+
+    const elapsed = performance.now() - start;
+    parent
+      .setAttribute('render.simulated_duration_ms', elapsed)
+      .setStatus('ERROR', 'Intentional slow render: ' + elapsed.toFixed(1) + 'ms > ' + BUDGET_MS + 'ms budget')
+      .addEvent('blocking.ended', { elapsed_ms: elapsed })
+      .end();
+
+    setSlowResult(elapsed.toFixed(1) + 'ms — ERROR span emitted, check dashboard');
+  }
+
+  function simulateCanaryError() {
+    // In canary v2, we simulate a 20% error rate on checkout.submit
+    const isError = deploymentVersion === '2.0.0' && Math.random() < 0.20;
+    const span = tracer.startSpan('checkout.submit', {
+      attributes: {
+        'cart.items_count': items.length,
+        'cart.total_value': items.reduce((s, i) => s + i.price * i.qty, 0),
+        'deploy.version':   deploymentVersion || '1.0.0',
+      },
+    });
+    span.addEvent('payment.initiated');
+    setTimeout(() => {
+      if (isError) {
+        span
+          .setStatus('ERROR', 'Payment gateway timeout (simulated canary regression)')
+          .addEvent('payment.failed', { reason: 'gateway_timeout' })
+          .end();
+      } else {
+        span.addEvent('payment.completed').setStatus('OK').end();
+      }
+    }, 80 + Math.random() * 120);
+  }
+
+  const total = items.reduce((s, i) => s + i.price * i.qty, 0);
+
+  return (
+    <div style={{ background: 'linear-gradient(135deg,#431407,#1c0a02)', border: '1px solid #9a3412', borderRadius: '0.75rem', padding: '1.25rem', fontFamily: 'ui-sans-serif,system-ui,sans-serif' }}>
+      <p style={{ margin: '0 0 0.25rem', color: '#fb923c', fontSize: '0.65rem', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
+        checkout remote · {BUDGET_MS}ms render budget · {deploymentVersion === '2.0.0' ? '⚠ canary v2 — 20% error rate' : 'stable v1'}
+      </p>
+      <h2 style={{ margin: '0 0 0.75rem', color: '#fed7aa', fontSize: '1.1rem' }}>Cart</h2>
+
+      {items.map((item, i) => (
+        <div key={i} style={{ display: 'flex', justifyContent: 'space-between', color: '#fdba74', fontSize: '0.82rem', marginBottom: '0.3rem' }}>
+          <span>{item.name} × {item.qty}</span>
+          <span>\${item.price * item.qty}</span>
+        </div>
+      ))}
+      <div style={{ borderTop: '1px solid #7c2d12', marginTop: '0.5rem', paddingTop: '0.5rem', display: 'flex', justifyContent: 'space-between', fontWeight: 700, color: '#fed7aa', fontSize: '0.85rem' }}>
+        <span>Total</span><span>\${total}</span>
+      </div>
+
+      <div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.75rem', flexWrap: 'wrap' }}>
+        <button
+          onClick={simulateCanaryError}
+          style={{ padding: '0.3rem 0.75rem', background: '#7c2d12', border: '1px solid #9a3412', borderRadius: '0.4rem', color: '#fed7aa', fontSize: '0.75rem', cursor: 'pointer' }}
+        >
+          Submit order {deploymentVersion === '2.0.0' ? '(20% fail chance)' : '(always OK)'}
+        </button>
+        <button
+          onClick={simulateSlowRender}
+          style={{ padding: '0.3rem 0.75rem', background: '#451a03', border: '1px solid #7c2d12', borderRadius: '0.4rem', color: '#fb923c', fontSize: '0.75rem', cursor: 'pointer' }}
+        >
+          Simulate slow render ({'>'}{BUDGET_MS}ms)
+        </button>
+      </div>
+      {slowResult && (
+        <p style={{ margin: '0.5rem 0 0', color: '#ef4444', fontSize: '0.7rem' }}>⚠ {slowResult}</p>
+      )}
+      <p style={{ margin: '0.75rem 0 0', color: '#7c2d12', fontSize: '0.7rem', lineHeight: 1.4 }}>
+        Switch host to canary v2.0.0 → submit orders → spot ERROR spans in the dashboard
+        → this is how you'd auto-rollback a bad canary deploy.
+      </p>
+    </div>
+  );
+}
+`;
+
+      const README = `# MFE + OpenTelemetry: Distributed Tracing & Performance Budgets
+
+## What this lab shows
+
+| Concept | Where to look |
+|---------|---------------|
+| Tracer singleton shared across MFEs | \`apps/host/src/telemetry.js\` |
+| Span lifecycle (start → attributes → events → end) | all \`*.jsx\` files |
+| W3C traceparent header propagation | App.jsx "Make API call" button |
+| Performance budget enforcement | \`apps/checkout/src/CheckoutPanel.jsx\` |
+| Canary vs stable telemetry split | version selector in App.jsx |
+| OTLP-like span collector | host \`webpack.config.js\` setupMiddlewares |
+| Live trace waterfall UI | \`apps/host/src/TraceDashboard.jsx\` |
+
+## Canary deploy workflow
+
+1. Start the lab (\`npm run dev\` at root)
+2. Load both remotes in the browser
+3. Submit a few orders with **stable v1** — all green
+4. Switch to **canary v2** — 20% of submit spans become ERROR
+5. In a real system: an alert fires when the error-rate delta exceeds a threshold
+   (\`error_rate{version="2.0.0"} > 2 * error_rate{version="1.0.0"}\`)
+6. Auto-rollback restores v1 and the dashboard turns green
+
+## Experiments
+
+1. **Lower the budget**: change \`BUDGET_MS = 50\` to \`BUDGET_MS = 10\` in CheckoutPanel.jsx
+   — every render exceeds budget → dashboard lights up red
+2. **Add an attribute**: in ProfileCard.jsx add \`span.setAttribute('user.id', 'u_42')\`
+   — click the span in the dashboard to see it
+3. **Trace an async operation**: in App.jsx start a span before a \`setTimeout()\`,
+   end it inside — observe the duration in the waterfall
+4. **Export**: click "Export JSON" in the dashboard → open in VS Code → paste into
+   https://jaeger.io (File > Upload) for a real Jaeger waterfall view
+`;
+
+      return {
+        "README.md": README,
+        "package.json": ROOT_PACKAGE,
+        "apps/host/package.json": HOST_PACKAGE,
+        "apps/host/webpack.config.js": HOST_WEBPACK,
+        "apps/host/public/index.html": HOST_HTML,
+        "apps/host/src/index.js": HOST_INDEX_JS,
+        "apps/host/src/bootstrap.jsx": HOST_BOOTSTRAP,
+        "apps/host/src/telemetry.js": HOST_TELEMETRY,
+        "apps/host/src/App.jsx": HOST_APP,
+        "apps/host/src/TraceDashboard.jsx": HOST_TRACE_DASHBOARD,
+        "apps/profile/package.json": PROFILE_PACKAGE,
+        "apps/profile/webpack.config.js": PROFILE_WEBPACK,
+        "apps/profile/public/index.html": REMOTE_HTML("Profile Remote"),
+        "apps/profile/src/index.js": REMOTE_INDEX,
+        "apps/profile/src/bootstrap.js": REMOTE_BOOTSTRAP("ProfileCard"),
+        "apps/profile/src/ProfileCard.jsx": PROFILE_CARD,
+        "apps/checkout/package.json": CHECKOUT_PACKAGE,
+        "apps/checkout/webpack.config.js": CHECKOUT_WEBPACK,
+        "apps/checkout/public/index.html": REMOTE_HTML("Checkout Remote"),
+        "apps/checkout/src/index.js": REMOTE_INDEX,
+        "apps/checkout/src/bootstrap.js": REMOTE_BOOTSTRAP("CheckoutPanel"),
+        "apps/checkout/src/CheckoutPanel.jsx": CHECKOUT_PANEL,
+      };
+    })(),
+  },
+];