create-interview-cockpit 0.8.0 → 0.10.0

package/template/client/src/reactLab.ts

@@ -281,12 +281,235 @@ This lab uses real webpack 5 + webpack-dev-server + Module Federation.
     "build": "webpack --config webpack.config.js"
   }
 }
+`,
+  "apps/shared/mfInspector.js": `import React from "react";
+import ReactDOM from "react-dom";
+// NOTE: default import (not namespace import) is intentional — namespace objects
+// are never reference-equal across MF consumers even when the singleton is shared,
+// so comparing the default export is the only way to prove same-instance.
+
+const app =
+  typeof __MF_INSPECTOR_APP__ === "string" ? __MF_INSPECTOR_APP__ : "unknown";
+const sandboxId =
+  typeof __MF_INSPECTOR_SANDBOX_ID__ === "string"
+    ? __MF_INSPECTOR_SANDBOX_ID__
+    : "";
+const declaredConfig =
+  typeof __MF_INSPECTOR_DECLARED_CONFIG__ !== "undefined"
+    ? __MF_INSPECTOR_DECLARED_CONFIG__
+    : null;
+const runtimeId =
+  typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+    ? crypto.randomUUID()
+    : app + "-" + Date.now() + "-" + Math.random().toString(36).slice(2);
+
+let attachedRouteListeners = false;
+
+function getRoute() {
+  if (typeof window === "undefined" || !window.location) return "/";
+  const route =
+    window.location.pathname +
+    window.location.search +
+    window.location.hash;
+  return route || "/";
+}
+
+function cloneJsonSafe(value) {
+  if (value == null) return value;
+  try {
+    return JSON.parse(JSON.stringify(value));
+  } catch {
+    return value;
+  }
+}
+
+export async function ensureShareScopeReady() {
+  try {
+    if (typeof __webpack_init_sharing__ === "function") {
+      await __webpack_init_sharing__("default");
+    }
+  } catch (error) {
+    emitInspectorEvent("share-init-error", {
+      message: error instanceof Error ? error.message : String(error),
+    });
+  }
+}
+
+export function snapshotShareScopes() {
+  try {
+    if (typeof __webpack_share_scopes__ === "undefined") return {};
+    return Object.fromEntries(
+      Object.entries(__webpack_share_scopes__).map(([scopeName, scopeValue]) => [
+        scopeName,
+        Object.fromEntries(
+          Object.entries(scopeValue || {}).map(([packageName, versions]) => [
+            packageName,
+            Object.entries(versions || {}).map(([version, entry]) => ({
+              version,
+              from: entry && typeof entry.from === "string" ? entry.from : null,
+              eager: Boolean(entry && entry.eager),
+              loaded: Boolean(entry && entry.loaded),
+              hasGet: Boolean(entry && typeof entry.get === "function"),
+            })),
+          ]),
+        ),
+      ]),
+    );
+  } catch (error) {
+    return {
+      __error: error instanceof Error ? error.message : String(error),
+    };
+  }
+}
+
+export function emitInspectorEvent(kind, payload) {
+  if (!sandboxId || typeof window === "undefined" || !window.parent) return;
+  window.parent.postMessage(
+    {
+      type: "mf-inspector-event",
+      sandboxId,
+      app,
+      runtimeId,
+      kind,
+      route: getRoute(),
+      timestamp: Date.now(),
+      payload: cloneJsonSafe(payload),
+    },
+    "*",
+  );
+}
+
+function attachRouteListeners() {
+  if (attachedRouteListeners || typeof window === "undefined") return;
+  attachedRouteListeners = true;
+  window.addEventListener("popstate", () => {
+    void emitRouteSnapshot("popstate");
+  });
+  window.addEventListener("hashchange", () => {
+    void emitRouteSnapshot("hashchange");
+  });
+}
+
+export function emitDeclaredConfig() {
+  emitInspectorEvent("declared-config", {
+    declaredConfig: cloneJsonSafe(declaredConfig),
+  });
+}
+
+export async function emitRuntimeBoot(label) {
+  attachRouteListeners();
+  await ensureShareScopeReady();
+  emitDeclaredConfig();
+  emitInspectorEvent("runtime-boot", {
+    label: label || "boot",
+    reactVersion: React.version || null,
+    reactDomVersion: ReactDOM.version || null,
+    declaredConfig: cloneJsonSafe(declaredConfig),
+  });
+  emitInspectorEvent("share-snapshot", {
+    label: (label || "boot") + ":share-snapshot",
+    shareScopes: snapshotShareScopes(),
+  });
+}
+
+export async function emitRouteSnapshot(label) {
+  await ensureShareScopeReady();
+  emitInspectorEvent("route-change", {
+    label: label || "route",
+    shareScopes: snapshotShareScopes(),
+  });
+}
+
+export function getRemoteInspectorBridge() {
+  return {
+    app,
+    reactVersion: React.version || null,
+    reactDomVersion: ReactDOM.version || null,
+    reactObject: React,
+    reactDomObject: ReactDOM,
+    declaredConfig: cloneJsonSafe(declaredConfig),
+    shareScopes: snapshotShareScopes(),
+  };
+}
+
+export function makeInspectableLazy(remoteKey, componentLoad, debugLoad) {
+  return async () => {
+    await ensureShareScopeReady();
+    emitInspectorEvent("remote-load-start", {
+      remoteKey,
+      shareScopes: snapshotShareScopes(),
+    });
+    const startedAt =
+      typeof performance !== "undefined" && typeof performance.now === "function"
+        ? performance.now()
+        : Date.now();
+
+    try {
+      const componentModule = await componentLoad();
+      const finishedAt =
+        typeof performance !== "undefined" && typeof performance.now === "function"
+          ? performance.now()
+          : Date.now();
+
+      emitInspectorEvent("remote-load-success", {
+        remoteKey,
+        durationMs: Number((finishedAt - startedAt).toFixed(2)),
+        exportKeys: Object.keys(componentModule || {}),
+        shareScopes: snapshotShareScopes(),
+      });
+
+      if (debugLoad) {
+        try {
+          const debugModule = await debugLoad();
+          const bridgeValue =
+            typeof debugModule.getRemoteInspectorBridge === "function"
+              ? debugModule.getRemoteInspectorBridge()
+              : typeof debugModule.default === "function"
+                ? debugModule.default()
+                : debugModule.default || debugModule;
+
+          if (bridgeValue) {
+            emitInspectorEvent("identity-check", {
+              remoteKey,
+              remoteApp:
+                typeof bridgeValue.app === "string"
+                  ? bridgeValue.app
+                  : remoteKey.split("/")[0],
+              reactVersion: bridgeValue.reactVersion || null,
+              reactDomVersion: bridgeValue.reactDomVersion || null,
+              sameReactInstance: bridgeValue.reactObject === React,
+              sameReactDomInstance: bridgeValue.reactDomObject === ReactDOM,
+              declaredConfig: cloneJsonSafe(bridgeValue.declaredConfig),
+              shareScopes: cloneJsonSafe(bridgeValue.shareScopes),
+            });
+          }
+        } catch (error) {
+          emitInspectorEvent("identity-check-error", {
+            remoteKey,
+            message: error instanceof Error ? error.message : String(error),
+            shareScopes: snapshotShareScopes(),
+          });
+        }
+      }
+
+      return componentModule;
+    } catch (error) {
+      emitInspectorEvent("remote-load-error", {
+        remoteKey,
+        message: error instanceof Error ? error.message : String(error),
+        shareScopes: snapshotShareScopes(),
+      });
+      throw error;
+    }
+  };
+}
 `,
   "apps/host/src/index.jsx": `import("./bootstrap");
 `,
   "apps/host/src/bootstrap.jsx": `import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
+import { emitRuntimeBoot } from "../../shared/mfInspector";
 
 const root = createRoot(document.getElementById("root"));
 
@@ -295,11 +518,26 @@ root.render(
     <App />
   </React.StrictMode>,
 );
+
+void emitRuntimeBoot("host-bootstrap");
 `,
   "apps/host/src/App.jsx": `import React, { Suspense } from "react";
-
-const ProfileCard = React.lazy(() => import("profile/ProfileCard"));
-const CheckoutPanel = React.lazy(() => import("checkout/CheckoutPanel"));
+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"),
+  ),
+);
 
 function RemoteBoundary({ title, children }) {
   return (
@@ -366,12 +604,26 @@ export default function App() {
 }
 `,
   "apps/host/webpack.config.js": `const path = require("path");
+const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const { ModuleFederationPlugin } = require("webpack").container;
+const { ModuleFederationPlugin } = webpack.container;
 
 const hostPort = Number(process.env.HOST_PORT || 3100);
 const profilePort = Number(process.env.PROFILE_PORT || 3101);
 const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
+const sharedConfig = {
+  react: { singleton: true, requiredVersion: false },
+  "react-dom": { singleton: true, requiredVersion: false },
+};
+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",
@@ -409,16 +661,15 @@ module.exports = {
     },
   },
   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: {
-        profile: "profile@http://localhost:" + profilePort + "/remoteEntry.js",
-        checkout: "checkout@http://localhost:" + checkoutPort + "/remoteEntry.js",
-      },
-      shared: {
-        react: { singleton: true, requiredVersion: false },
-        "react-dom": { singleton: true, requiredVersion: false },
-      },
+      remotes: remoteConfig,
+      shared: sharedConfig,
     }),
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, "./public/index.html"),
@@ -446,12 +697,18 @@ module.exports = {
     "build": "webpack --config webpack.config.js"
   }
 }
+`,
+  "apps/profile/src/inspectorBridge.js": `import { getRemoteInspectorBridge } from "../../shared/mfInspector";
+
+export { getRemoteInspectorBridge };
+export default getRemoteInspectorBridge;
 `,
   "apps/profile/src/index.jsx": `import("./bootstrap");
 `,
   "apps/profile/src/bootstrap.jsx": `import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
+import { emitRuntimeBoot } from "../../shared/mfInspector";
 
 const root = createRoot(document.getElementById("root"));
 
@@ -460,6 +717,8 @@ root.render(
     <App />
   </React.StrictMode>,
 );
+
+void emitRuntimeBoot("profile-bootstrap");
 `,
   "apps/profile/src/App.jsx": `import React from "react";
 import ProfileCard from "./ProfileCard";
@@ -496,10 +755,24 @@ export default function ProfileCard() {
 }
 `,
   "apps/profile/webpack.config.js": `const path = require("path");
+const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const { ModuleFederationPlugin } = require("webpack").container;
+const { ModuleFederationPlugin } = webpack.container;
 
 const profilePort = Number(process.env.PROFILE_PORT || 3101);
+const sharedConfig = {
+  react: { singleton: true, requiredVersion: false },
+  "react-dom": { singleton: true, requiredVersion: false },
+};
+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",
@@ -536,16 +809,16 @@ module.exports = {
     },
   },
   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: {
-        "./ProfileCard": path.resolve(__dirname, "./src/ProfileCard.jsx"),
-      },
-      shared: {
-        react: { singleton: true, requiredVersion: false },
-        "react-dom": { singleton: true, requiredVersion: false },
-      },
+      exposes: exposeConfig,
+      shared: sharedConfig,
     }),
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, "./public/index.html"),
@@ -573,12 +846,18 @@ module.exports = {
     "build": "webpack --config webpack.config.js"
   }
 }
+`,
+  "apps/checkout/src/inspectorBridge.js": `import { getRemoteInspectorBridge } from "../../shared/mfInspector";
+
+export { getRemoteInspectorBridge };
+export default getRemoteInspectorBridge;
 `,
   "apps/checkout/src/index.jsx": `import("./bootstrap");
 `,
   "apps/checkout/src/bootstrap.jsx": `import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
+import { emitRuntimeBoot } from "../../shared/mfInspector";
 
 const root = createRoot(document.getElementById("root"));
 
@@ -587,6 +866,8 @@ root.render(
     <App />
   </React.StrictMode>,
 );
+
+void emitRuntimeBoot("checkout-bootstrap");
 `,
   "apps/checkout/src/App.jsx": `import React from "react";
 import CheckoutPanel from "./CheckoutPanel";
@@ -631,10 +912,24 @@ export default function CheckoutPanel() {
 }
 `,
   "apps/checkout/webpack.config.js": `const path = require("path");
+const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const { ModuleFederationPlugin } = require("webpack").container;
+const { ModuleFederationPlugin } = webpack.container;
 
 const checkoutPort = Number(process.env.CHECKOUT_PORT || 3102);
+const sharedConfig = {
+  react: { singleton: true, requiredVersion: false },
+  "react-dom": { singleton: true, requiredVersion: false },
+};
+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",
@@ -671,16 +966,16 @@ module.exports = {
     },
   },
   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: {
-        "./CheckoutPanel": path.resolve(__dirname, "./src/CheckoutPanel.jsx"),
-      },
-      shared: {
-        react: { singleton: true, requiredVersion: false },
-        "react-dom": { singleton: true, requiredVersion: false },
-      },
+      exposes: exposeConfig,
+      shared: sharedConfig,
     }),
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, "./public/index.html"),

package/template/client/tsconfig.tsbuildinfo

@@ -1,30 +1 @@
-{
-  "root": [
-    "./src/app.tsx",
-    "./src/api.ts",
-    "./src/main.tsx",
-    "./src/store.ts",
-    "./src/types.ts",
-    "./src/vite-env.d.ts",
-    "./src/components/aisettingsmodal.tsx",
-    "./src/components/annotationdialog.tsx",
-    "./src/components/chatmessage.tsx",
-    "./src/components/chatview.tsx",
-    "./src/components/codecontextpanel.tsx",
-    "./src/components/codelineannotationpopup.tsx",
-    "./src/components/coderunnermodal.tsx",
-    "./src/components/docrefmodal.tsx",
-    "./src/components/fileattachments.tsx",
-    "./src/components/filepickermodal.tsx",
-    "./src/components/fileviewermodal.tsx",
-    "./src/components/linkedconvospicker.tsx",
-    "./src/components/markdownrenderer.tsx",
-    "./src/components/mermaiddiagram.tsx",
-    "./src/components/plotembed.tsx",
-    "./src/components/sidebar.tsx",
-    "./src/components/textannotator.tsx",
-    "./src/components/vizcraftembed.tsx",
-    "./src/components/workspaceswitcher.tsx"
-  ],
-  "version": "5.9.3"
-}
+{"root":["./src/app.tsx","./src/api.ts","./src/infralab.ts","./src/main.tsx","./src/reactlab.ts","./src/store.ts","./src/types.ts","./src/vite-env.d.ts","./src/components/aisettingsmodal.tsx","./src/components/annotationdialog.tsx","./src/components/chatmessage.tsx","./src/components/chatview.tsx","./src/components/codecontextpanel.tsx","./src/components/codelineannotationpopup.tsx","./src/components/coderunnermodal.tsx","./src/components/docrefmodal.tsx","./src/components/fileattachments.tsx","./src/components/filepickermodal.tsx","./src/components/fileviewermodal.tsx","./src/components/infralabmodal.tsx","./src/components/linkedconvospicker.tsx","./src/components/markdownrenderer.tsx","./src/components/mermaiddiagram.tsx","./src/components/notesmodal.tsx","./src/components/plotembed.tsx","./src/components/sidebar.tsx","./src/components/textannotator.tsx","./src/components/vizcraftembed.tsx","./src/components/workspaceswitcher.tsx"],"errors":true,"version":"5.9.3"}

package/template/cockpit.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.6.0"
+  "version": "0.8.0"
 }

package/template/server/src/index.ts

@@ -2293,6 +2293,7 @@ const NEXT_MODULES_DIR = path.join(NEXT_NPX_DIR, "node_modules");
 const NEXT_SANDBOX_BASE = path.join(NEXT_NPX_DIR, ".sandboxes");
 
 interface ModuleFederationSandboxEntry {
+  id: string;
   child: ReturnType<typeof spawn>;
   dir: string;
   hostUrl: string;
@@ -2526,6 +2527,7 @@ function getModuleFederationCommandEnv(
     HOST_PORT: hostPort,
     PROFILE_PORT: profilePort,
     CHECKOUT_PORT: checkoutPort,
+    MF_SANDBOX_ID: sandbox.id,
     npm_config_update_notifier: "false",
   };
 }
@@ -2877,11 +2879,13 @@ app.post("/api/module-federation/start", async (req, res) => {
         HOST_PORT: String(hostPort),
         PROFILE_PORT: String(profilePort),
         CHECKOUT_PORT: String(checkoutPort),
+        MF_SANDBOX_ID: id,
         npm_config_update_notifier: "false",
       },
     });
 
     const entry: ModuleFederationSandboxEntry = {
+      id,
       child,
       dir,
       hostUrl: appUrls.host,