create-interview-cockpit 0.9.0 → 0.10.0

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

@@ -73,10 +73,67 @@ interface OutputLine {
   source?: "server" | "client";
 }
 
+type MfInspectorEventKind =
+  | "declared-config"
+  | "runtime-boot"
+  | "route-change"
+  | "share-snapshot"
+  | "remote-load-start"
+  | "remote-load-success"
+  | "remote-load-error"
+  | "identity-check"
+  | "identity-check-error"
+  | "share-init-error";
+
+interface MfInspectorEvent {
+  type: "mf-inspector-event";
+  sandboxId: string;
+  app: string;
+  runtimeId: string;
+  kind: MfInspectorEventKind | string;
+  route: string;
+  timestamp: number;
+  payload?: Record<string, unknown>;
+}
+
 const LANG_OPTIONS = ["typescript", "javascript"] as const;
 type Lang = (typeof LANG_OPTIONS)[number];
 type FrontendClientType = "script" | FrontendLabType;
 
+const MF_INSPECTOR_VIEWS = ["map", "shares", "events"] as const;
+
+const MF_INSPECTOR_VIEW_COPY: Record<
+  (typeof MF_INSPECTOR_VIEWS)[number],
+  {
+    label: string;
+    title: string;
+    description: string;
+    tip: string;
+  }
+> = {
+  map: {
+    label: "overview",
+    title: "Overview: who loaded what",
+    description:
+      "Start here. The top box is the host page. The lower boxes are remote apps. Line color and table status tell you whether the host tried to load a remote, whether the load worked, and whether React was reused safely.",
+    tip: "A healthy path is usually: host starts, host loads a remote, then the React copy check says same copy.",
+  },
+  shares: {
+    label: "shared packages",
+    title: "Shared packages: webpack's live reuse list",
+    description:
+      "This is the runtime truth. It shows which library versions webpack currently knows about and whether any app has started using them yet.",
+    tip: "For React apps, the happy path is usually one loaded React version and one loaded ReactDOM version that every app reuses.",
+  },
+  events: {
+    label: "timeline",
+    title: "Timeline: one browser event per row",
+    description:
+      "Newest items appear first. Each row tells you which app reported something, what happened in plain English, and why that step matters.",
+    tip: "If you're debugging a remote, follow the sequence: app started, host began loading, host finished loading, then React copy comparison.",
+  },
+};
+
 // ── Sandbox default snippets ─────────────────────────────────────────
 const DEFAULT_SERVER_CODE = `import express from 'express';
 import { Readable } from 'stream';
@@ -254,6 +311,216 @@ function buildFileTree(paths: string[]): FileTreeNode {
   return root;
 }
 
+function isMfInspectorEvent(value: unknown): value is MfInspectorEvent {
+  if (!value || typeof value !== "object") return false;
+  const data = value as Record<string, unknown>;
+  return (
+    data.type === "mf-inspector-event" &&
+    typeof data.sandboxId === "string" &&
+    typeof data.app === "string" &&
+    typeof data.runtimeId === "string" &&
+    typeof data.kind === "string" &&
+    typeof data.route === "string" &&
+    typeof data.timestamp === "number"
+  );
+}
+
+function asInspectorRecord(value: unknown): Record<string, unknown> {
+  return value && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+}
+
+function asInspectorNumber(value: unknown): number | null {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+
+function asInspectorStringArray(value: unknown): string[] {
+  return Array.isArray(value)
+    ? value.filter((entry): entry is string => typeof entry === "string")
+    : [];
+}
+
+function formatInspectorTimestamp(timestamp: number): string {
+  try {
+    return new Date(timestamp).toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false,
+    });
+  } catch {
+    return String(timestamp);
+  }
+}
+
+function stringifyInspectorValue(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (value == null) return "null";
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function getMfInspectorBadgeClass(kind: string): string {
+  if (kind.includes("error")) {
+    return "border-red-500/30 bg-red-500/10 text-red-300";
+  }
+  if (kind === "identity-check") {
+    return "border-emerald-500/30 bg-emerald-500/10 text-emerald-300";
+  }
+  if (kind === "remote-load-success") {
+    return "border-cyan-500/30 bg-cyan-500/10 text-cyan-300";
+  }
+  if (kind === "share-snapshot" || kind === "declared-config") {
+    return "border-amber-500/30 bg-amber-500/10 text-amber-300";
+  }
+  return "border-slate-600 bg-slate-800/80 text-slate-300";
+}
+
+function formatMfInspectorAppLabel(app: string): string {
+  if (!app) return "App";
+  if (app === "host") return "Host app";
+  return `${app.charAt(0).toUpperCase()}${app.slice(1)} remote`;
+}
+
+function getMfInspectorFriendlyKindLabel(kind: string): string {
+  switch (kind) {
+    case "declared-config":
+      return "Setup announced";
+    case "runtime-boot":
+      return "App started in browser";
+    case "route-change":
+      return "Route changed";
+    case "share-snapshot":
+      return "Shared package snapshot";
+    case "remote-load-start":
+      return "Host started loading a remote";
+    case "remote-load-success":
+      return "Remote finished loading";
+    case "remote-load-error":
+      return "Remote load failed";
+    case "identity-check":
+      return "React copy comparison";
+    case "identity-check-error":
+      return "React comparison failed";
+    case "share-init-error":
+      return "Sharing setup failed";
+    default:
+      return kind;
+  }
+}
+
+function describeMfInspectorEvent(event: MfInspectorEvent): string {
+  const payload = asInspectorRecord(event.payload);
+
+  switch (event.kind) {
+    case "declared-config":
+      return "This app described its webpack setup: what it can expose, what other apps it can call, and which packages it wants to reuse.";
+    case "runtime-boot": {
+      const label =
+        typeof payload.label === "string" ? payload.label : "runtime boot";
+      const reactVersion =
+        typeof payload.reactVersion === "string"
+          ? payload.reactVersion
+          : "unknown";
+      return `${formatMfInspectorAppLabel(event.app)} started running in the browser. Boot label: ${label}. React version seen: ${reactVersion}.`;
+    }
+    case "route-change": {
+      const label =
+        typeof payload.label === "string" ? payload.label : "route change";
+      return `The page route changed, so the inspector took another snapshot of the shared packages. Trigger: ${label}.`;
+    }
+    case "share-snapshot": {
+      const shareScopes = asInspectorRecord(payload.shareScopes);
+      const packageCount = Object.entries(shareScopes).reduce(
+        (count, [scopeName, scopeValue]) => {
+          if (scopeName === "__error") return count;
+          return count + Object.keys(asInspectorRecord(scopeValue)).length;
+        },
+        0,
+      );
+      return `The inspector took a fresh picture of webpack's shared-package list and saw ${packageCount} package${packageCount === 1 ? "" : "s"}.`;
+    }
+    case "remote-load-start":
+      return `The host started requesting ${typeof payload.remoteKey === "string" ? payload.remoteKey : "a remote module"}. This is the moment remote code begins loading into the host page.`;
+    case "remote-load-success": {
+      const remoteKey =
+        typeof payload.remoteKey === "string"
+          ? payload.remoteKey
+          : "remote module";
+      const durationMs = asInspectorNumber(payload.durationMs);
+      return durationMs === null
+        ? `The host finished loading ${remoteKey}. The remote code is now available to render.`
+        : `The host finished loading ${remoteKey} in ${durationMs}ms. The remote code is now available to render.`;
+    }
+    case "remote-load-error":
+      return `The host tried to load ${typeof payload.remoteKey === "string" ? payload.remoteKey : "a remote module"}, but it failed: ${typeof payload.message === "string" ? payload.message : "unknown error"}`;
+    case "identity-check": {
+      const remoteKey =
+        typeof payload.remoteKey === "string"
+          ? payload.remoteKey
+          : "remote module";
+      const sameReact = payload.sameReactInstance === true;
+      const sameDom = payload.sameReactDomInstance === true;
+      return `After loading ${remoteKey}, the host compared its React copies with the remote's copies. Result: React ${sameReact ? "same copy" : "different copy"}, ReactDOM ${sameDom ? "same copy" : "different copy"}.`;
+    }
+    case "identity-check-error":
+      return `The remote loaded, but the follow-up React comparison could not finish for ${typeof payload.remoteKey === "string" ? payload.remoteKey : "that module"}: ${typeof payload.message === "string" ? payload.message : "unknown error"}`;
+    case "share-init-error":
+      return `Webpack could not prepare its shared-package system before the check ran: ${typeof payload.message === "string" ? payload.message : "unknown error"}`;
+    default:
+      return stringifyInspectorValue(payload);
+  }
+}
+
+function explainMfInspectorEvent(event: MfInspectorEvent): string {
+  switch (event.kind) {
+    case "declared-config":
+      return "This is the app's promise before runtime. It tells you what should be possible even before the browser loads anything.";
+    case "runtime-boot":
+      return "If you do not see this, that app never really started in the browser.";
+    case "route-change":
+      return "Some remotes load only after navigation, so route changes can explain why behavior changed later.";
+    case "share-snapshot":
+      return "This helps you compare what webpack is actually sharing right now versus what the config files claimed.";
+    case "remote-load-start":
+      return "If a later success row never appears, the host got stuck while trying to reach the remote.";
+    case "remote-load-success":
+      return "This proves the remote code arrived. It does not yet prove React is being shared safely.";
+    case "remote-load-error":
+      return "Common causes are a bad remote URL, a wrong expose name, or a remote build that is not serving correctly.";
+    case "identity-check":
+      return "The safest result is same copy for both React and ReactDOM. Different copies often lead to hooks, context, or state bugs.";
+    case "identity-check-error":
+      return "The remote may have loaded, but the inspector could not prove whether React was reused correctly.";
+    case "share-init-error":
+      return "Without this setup step, later sharing information may be incomplete or misleading.";
+    default:
+      return "This row is extra debug detail reported by the running apps.";
+  }
+}
+
+function areMfInspectorEventsEquivalent(
+  left: MfInspectorEvent,
+  right: MfInspectorEvent,
+): boolean {
+  return (
+    left.runtimeId === right.runtimeId &&
+    left.app === right.app &&
+    left.kind === right.kind &&
+    left.timestamp === right.timestamp &&
+    left.route === right.route &&
+    stringifyInspectorValue(left.payload) ===
+      stringifyInspectorValue(right.payload)
+  );
+}
+
 function isModuleFederationGeneratedPath(filePath: string): boolean {
   return /(^|\/)dist\//.test(filePath);
 }
@@ -283,7 +550,7 @@ function getModuleFederationCommandRoots(
   });
 }
 
-type SbxBottomTab = "output" | "console" | "chat";
+type SbxBottomTab = "output" | "console" | "inspector" | "chat";
 
 export default function CodeRunnerModal() {
   const {
@@ -366,6 +633,14 @@ export default function CodeRunnerModal() {
     Record<string, string>
   >({});
   const [mfLoadingFile, setMfLoadingFile] = useState<string | null>(null);
+  const [mfInspectorEvents, setMfInspectorEvents] = useState<
+    MfInspectorEvent[]
+  >([]);
+  const [mfInspectorView, setMfInspectorView] = useState<
+    "map" | "shares" | "events"
+  >("map");
+  const [mfInspectorGuideCollapsed, setMfInspectorGuideCollapsed] =
+    useState(false);
   // Simulated URL bar state for Next.js mode
   const [reactPreviewPath, setReactPreviewPath] = useState("/");
   const [reactNavInput, setReactNavInput] = useState("/");
@@ -389,6 +664,7 @@ export default function CodeRunnerModal() {
     containerW: number;
   } | null>(null);
   const sbxOutputDrag = useRef<{ startY: number; startH: number } | null>(null);
+  const [isDraggingResize, setIsDraggingResize] = useState(false);
   const sbxEditorRowRef = useRef<HTMLDivElement>(null);
 
   // ── Sandbox save state (single combined save) ──────────────────
@@ -609,6 +885,7 @@ export default function CodeRunnerModal() {
         setMfGeneratedFiles([]);
         setMfGeneratedFileContents({});
         setMfLoadingFile(null);
+        setMfInspectorEvents([]);
       }
     }
   }, [runnerInitialSandbox]);
@@ -653,14 +930,22 @@ export default function CodeRunnerModal() {
       }
     };
     const onUp = () => {
-      sbxDividerDrag.current = null;
-      sbxOutputDrag.current = null;
+      if (sbxDividerDrag.current || sbxOutputDrag.current) {
+        sbxDividerDrag.current = null;
+        sbxOutputDrag.current = null;
+        document.body.style.userSelect = "";
+        document.body.style.cursor = "";
+        setIsDraggingResize(false);
+      }
     };
     document.addEventListener("mousemove", onMove);
     document.addEventListener("mouseup", onUp);
     return () => {
       document.removeEventListener("mousemove", onMove);
       document.removeEventListener("mouseup", onUp);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+      setIsDraggingResize(false);
     };
   }, []);
 
@@ -1153,6 +1438,7 @@ export default function CodeRunnerModal() {
     setMfGeneratedFileContents({});
     setMfLoadingFile(null);
     setMfConsoleOutput([]);
+    setMfInspectorEvents([]);
     setSbxBottomTab("output");
     setSandboxOutput([
       {
@@ -1206,6 +1492,7 @@ export default function CodeRunnerModal() {
     setMfGeneratedFileContents({});
     setMfLoadingFile(null);
     setMfConsoleRunning(false);
+    setMfInspectorEvents([]);
     setSandboxOutput((prev) => [
       ...prev,
       {
@@ -1302,6 +1589,34 @@ export default function CodeRunnerModal() {
     return () => clearInterval(interval);
   }, [mfSandboxId]);
 
+  useEffect(() => {
+    if (clientType !== "module-federation" || !mfSandboxId) return;
+
+    const handler = (event: MessageEvent) => {
+      if (!isMfInspectorEvent(event.data)) return;
+      if (event.data.sandboxId !== mfSandboxId) return;
+
+      const payload = asInspectorRecord(event.data.payload);
+      const nextEvent: MfInspectorEvent = {
+        ...event.data,
+        payload,
+      };
+
+      setMfInspectorEvents((prev) => {
+        const duplicate = prev.some((entry) =>
+          areMfInspectorEventsEquivalent(entry, nextEvent),
+        );
+        if (duplicate) return prev;
+
+        const next = [...prev, nextEvent];
+        return next.length > 250 ? next.slice(next.length - 250) : next;
+      });
+    };
+
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [clientType, mfSandboxId]);
+
   useEffect(() => {
     if (clientType !== "module-federation" || !mfSandboxId) return;
     if (!reactActiveFile) return;
@@ -1462,8 +1777,9 @@ export default function CodeRunnerModal() {
       setMfGeneratedFileContents({});
       setMfLoadingFile(null);
       setMfConsoleRunning(false);
+      setMfInspectorEvents([]);
       setSbxBottomTab((current) =>
-        current === "console" ? "output" : current,
+        current === "console" || current === "inspector" ? "output" : current,
       );
     }
   }, [clientType, nxSandboxId, mfSandboxId]);
@@ -1487,8 +1803,9 @@ export default function CodeRunnerModal() {
         setMfLoadingFile(null);
         setMfConsoleOutput([]);
         setMfConsoleRunning(false);
+        setMfInspectorEvents([]);
         setSbxBottomTab((current) =>
-          current === "console" ? "output" : current,
+          current === "console" || current === "inspector" ? "output" : current,
         );
       }
       if (ct !== "script") {
@@ -1794,6 +2111,377 @@ export default function CodeRunnerModal() {
   const isActiveModuleFederationGeneratedFile =
     clientType === "module-federation" &&
     moduleFederationGeneratedFileSet.has(reactActiveFile);
+  const mfInspectorRuntimeCount = new Set(
+    mfInspectorEvents.map((event) => event.runtimeId),
+  ).size;
+  const mfInspectorLastEvent =
+    mfInspectorEvents[mfInspectorEvents.length - 1] ?? null;
+  const mfInspectorDeclaredConfigMap = new Map<
+    string,
+    {
+      app: string;
+      declaredConfig: Record<string, unknown>;
+      timestamp: number;
+      source: string;
+    }
+  >();
+  const mfInspectorShareScopeMap = new Map<
+    string,
+    {
+      app: string;
+      shareScopes: Record<string, unknown>;
+      timestamp: number;
+      route: string;
+      source: string;
+      runtimeId: string;
+    }
+  >();
+  const mfInspectorIdentityEvents: MfInspectorEvent[] = [];
+
+  for (const event of mfInspectorEvents) {
+    const payload = asInspectorRecord(event.payload);
+    const declaredConfig = asInspectorRecord(payload.declaredConfig);
+    if (Object.keys(declaredConfig).length > 0) {
+      const configApp =
+        event.kind === "identity-check" && typeof payload.remoteApp === "string"
+          ? payload.remoteApp
+          : event.app;
+      mfInspectorDeclaredConfigMap.set(configApp, {
+        app: configApp,
+        declaredConfig,
+        timestamp: event.timestamp,
+        source: event.kind,
+      });
+    }
+
+    const shareScopes = asInspectorRecord(payload.shareScopes);
+    if (Object.keys(shareScopes).length > 0) {
+      mfInspectorShareScopeMap.set(event.app, {
+        app: event.app,
+        shareScopes,
+        timestamp: event.timestamp,
+        route: event.route,
+        source: event.kind,
+        runtimeId: event.runtimeId,
+      });
+    }
+
+    if (
+      event.kind === "identity-check" ||
+      event.kind === "identity-check-error"
+    ) {
+      mfInspectorIdentityEvents.push(event);
+    }
+  }
+
+  const mfInspectorDeclaredConfigs = Array.from(
+    mfInspectorDeclaredConfigMap.values(),
+  ).sort((left, right) => left.app.localeCompare(right.app));
+  const mfInspectorShareSnapshots = Array.from(
+    mfInspectorShareScopeMap.values(),
+  ).sort((left, right) => left.app.localeCompare(right.app));
+  const mfInspectorRecentEvents = [...mfInspectorEvents].slice(-60).reverse();
+
+  // ── Inspector topology derived data ──────────────────────────────────────
+  const mfInspectorBootMap = new Map<
+    string,
+    {
+      reactVersion: string | null;
+      reactDomVersion: string | null;
+      timestamp: number;
+    }
+  >();
+  const mfInspectorRemoteLoadMap = new Map<
+    string,
+    {
+      status: "loading" | "success" | "error";
+      durationMs: number | null;
+      message: string | null;
+    }
+  >();
+  const mfInspectorIdentityResultMap = new Map<
+    string,
+    {
+      sameReact: boolean;
+      sameReactDom: boolean;
+      remoteApp: string;
+      reactVersion: string | null;
+      reactDomVersion: string | null;
+      error: string | null;
+    }
+  >();
+
+  for (const ev of mfInspectorEvents) {
+    const ep = asInspectorRecord(ev.payload);
+    if (ev.kind === "runtime-boot") {
+      mfInspectorBootMap.set(ev.app, {
+        reactVersion:
+          typeof ep.reactVersion === "string" ? ep.reactVersion : null,
+        reactDomVersion:
+          typeof ep.reactDomVersion === "string" ? ep.reactDomVersion : null,
+        timestamp: ev.timestamp,
+      });
+    }
+    if (ev.kind === "remote-load-start") {
+      const rk = typeof ep.remoteKey === "string" ? ep.remoteKey : "unknown";
+      // Always reset to "loading" — a fresh load-start means a retry is in
+      // progress (e.g. after the user reloads the preview), so any previous
+      // error/success state should be replaced.
+      mfInspectorRemoteLoadMap.set(rk, {
+        status: "loading",
+        durationMs: null,
+        message: null,
+      });
+    }
+    if (ev.kind === "remote-load-success") {
+      const rk = typeof ep.remoteKey === "string" ? ep.remoteKey : "unknown";
+      mfInspectorRemoteLoadMap.set(rk, {
+        status: "success",
+        durationMs: asInspectorNumber(ep.durationMs),
+        message: null,
+      });
+    }
+    if (ev.kind === "remote-load-error") {
+      const rk = typeof ep.remoteKey === "string" ? ep.remoteKey : "unknown";
+      mfInspectorRemoteLoadMap.set(rk, {
+        status: "error",
+        durationMs: null,
+        message: typeof ep.message === "string" ? ep.message : "error",
+      });
+    }
+  }
+
+  for (const ev of mfInspectorIdentityEvents) {
+    const ep = asInspectorRecord(ev.payload);
+    const rk = typeof ep.remoteKey === "string" ? ep.remoteKey : "unknown";
+    if (ev.kind === "identity-check") {
+      mfInspectorIdentityResultMap.set(rk, {
+        sameReact: ep.sameReactInstance === true,
+        sameReactDom: ep.sameReactDomInstance === true,
+        remoteApp:
+          typeof ep.remoteApp === "string"
+            ? ep.remoteApp
+            : rk.split("/")[0] || "unknown",
+        reactVersion:
+          typeof ep.reactVersion === "string" ? ep.reactVersion : null,
+        reactDomVersion:
+          typeof ep.reactDomVersion === "string" ? ep.reactDomVersion : null,
+        error: null,
+      });
+    }
+    if (ev.kind === "identity-check-error") {
+      mfInspectorIdentityResultMap.set(rk, {
+        sameReact: false,
+        sameReactDom: false,
+        remoteApp: rk.split("/")[0] || "unknown",
+        reactVersion: null,
+        reactDomVersion: null,
+        error: typeof ep.message === "string" ? ep.message : "error",
+      });
+    }
+  }
+
+  // Remote app names for the topology
+  const mfTopologyRemoteNames = Array.from(
+    new Set([
+      ...mfInspectorDeclaredConfigs
+        .filter((c) => c.app !== "host")
+        .map((c) => c.app),
+      ...Array.from(mfInspectorBootMap.keys()).filter((k) => k !== "host"),
+      ...Array.from(mfInspectorShareScopeMap.keys()).filter(
+        (k) => k !== "host",
+      ),
+    ]),
+  );
+
+  // Remote keys grouped by remote app name (e.g. "profile" → ["profile/ProfileCard"])
+  // Sources: load events (from host loading), identity events (from host identity check),
+  // and declared config (so declared-but-unloaded remotes are always wired up).
+  const mfTopologyRemoteKeysByApp = new Map<string, string[]>();
+  const _addRemoteKey = (remoteKey: string) => {
+    const appName = remoteKey.split("/")[0] || remoteKey;
+    if (!mfTopologyRemoteKeysByApp.has(appName)) {
+      mfTopologyRemoteKeysByApp.set(appName, []);
+    }
+    const existing = mfTopologyRemoteKeysByApp.get(appName)!;
+    if (!existing.includes(remoteKey)) existing.push(remoteKey);
+  };
+  // From load events
+  for (const [remoteKey] of mfInspectorRemoteLoadMap) {
+    _addRemoteKey(remoteKey);
+  }
+  // From identity events (covers the case where load events were missed)
+  for (const [remoteKey] of mfInspectorIdentityResultMap) {
+    _addRemoteKey(remoteKey);
+  }
+  // From declared config — so every declared remote gets a key even before any events
+  for (const { app: cfgApp, declaredConfig } of mfInspectorDeclaredConfigs) {
+    if (cfgApp !== "host") continue; // only the host declares remotes it consumes
+    const remotes = asInspectorRecord(declaredConfig.remotes);
+    for (const remoteName of Object.keys(remotes)) {
+      // Derive the canonical remote key from declared exposes, or fall back to
+      // the key pattern seen in load/identity events for this remote app.
+      const existingKeys = mfTopologyRemoteKeysByApp.get(remoteName);
+      if (!existingKeys || existingKeys.length === 0) {
+        // Find any declared config for the remote itself to get its expose list
+        const remoteCfg = mfInspectorDeclaredConfigs.find(
+          (c) => c.app === remoteName,
+        );
+        const exposes = asInspectorRecord(
+          remoteCfg ? remoteCfg.declaredConfig.exposes : {},
+        );
+        const exposeKeys = Object.keys(exposes);
+        if (exposeKeys.length > 0) {
+          for (const exposeKey of exposeKeys) {
+            // exposeKey is like "./ProfileCard"; canonical remote key is "profile/ProfileCard"
+            const moduleName = exposeKey.replace(/^\.\//, "");
+            _addRemoteKey(`${remoteName}/${moduleName}`);
+          }
+        } else {
+          // No expose info yet — create a placeholder key so the node appears
+          _addRemoteKey(`${remoteName}/__placeholder`);
+        }
+      }
+    }
+  }
+
+  // Best share scope snapshot for the matrix (host has the most complete view)
+  const mfShareScopeForMatrix =
+    mfInspectorShareScopeMap.get("host") ??
+    (mfInspectorShareSnapshots.length > 0
+      ? mfInspectorShareSnapshots[mfInspectorShareSnapshots.length - 1]
+      : null);
+  const mfInspectorRemoteTableKeys = Array.from(
+    new Set([
+      ...Array.from(mfInspectorRemoteLoadMap.keys()),
+      ...Array.from(mfInspectorIdentityResultMap.keys()),
+    ]),
+  )
+    .filter((remoteKey) => !remoteKey.endsWith("/__placeholder"))
+    .sort((left, right) => left.localeCompare(right));
+  const mfInspectorLoadAttemptCount = mfInspectorRemoteTableKeys.filter(
+    (remoteKey) => mfInspectorRemoteLoadMap.has(remoteKey),
+  ).length;
+  const mfInspectorSharedRemoteCount = mfInspectorRemoteTableKeys.filter(
+    (remoteKey) => {
+      const result = mfInspectorIdentityResultMap.get(remoteKey);
+      return Boolean(
+        result && !result.error && result.sameReact && result.sameReactDom,
+      );
+    },
+  ).length;
+  const mfInspectorDifferentRemoteCount = mfInspectorRemoteTableKeys.filter(
+    (remoteKey) => {
+      const result = mfInspectorIdentityResultMap.get(remoteKey);
+      return Boolean(
+        result && !result.error && (!result.sameReact || !result.sameReactDom),
+      );
+    },
+  ).length;
+  const mfInspectorErroredRemoteCount = mfInspectorRemoteTableKeys.filter(
+    (remoteKey) => {
+      const result = mfInspectorIdentityResultMap.get(remoteKey);
+      const loadInfo = mfInspectorRemoteLoadMap.get(remoteKey);
+      return Boolean(result?.error) || loadInfo?.status === "error";
+    },
+  ).length;
+  const mfInspectorPendingRemoteCount = mfInspectorRemoteTableKeys.filter(
+    (remoteKey) => {
+      const result = mfInspectorIdentityResultMap.get(remoteKey);
+      const loadInfo = mfInspectorRemoteLoadMap.get(remoteKey);
+      return (
+        !result &&
+        (loadInfo?.status === "loading" || loadInfo?.status === "success")
+      );
+    },
+  ).length;
+  const mfInspectorIssueCount =
+    mfInspectorDifferentRemoteCount + mfInspectorErroredRemoteCount;
+  const mfInspectorViewCopy = MF_INSPECTOR_VIEW_COPY[mfInspectorView];
+  const mfInspectorSummaryCards = [
+    {
+      label: "Host page",
+      value: mfInspectorBootMap.has("host") ? "running" : "waiting",
+      toneClass: mfInspectorBootMap.has("host")
+        ? "text-sky-300"
+        : "text-amber-300",
+      hint: "The host is the page that loads remotes.",
+    },
+    {
+      label: "Remote modules",
+      value: String(mfInspectorRemoteTableKeys.length),
+      toneClass: "text-slate-100",
+      hint: "Separate pieces of remote code the host has seen.",
+    },
+    {
+      label: "Load attempts",
+      value: String(mfInspectorLoadAttemptCount),
+      toneClass:
+        mfInspectorLoadAttemptCount > 0 ? "text-cyan-300" : "text-slate-400",
+      hint: "How many remote modules the host actually tried to fetch.",
+    },
+    {
+      label: "Same React copy",
+      value: String(mfInspectorSharedRemoteCount),
+      toneClass:
+        mfInspectorSharedRemoteCount > 0
+          ? "text-emerald-300"
+          : "text-slate-400",
+      hint: "Healthy result after the comparison step.",
+    },
+    {
+      label: "Waiting / issues",
+      value: `${mfInspectorPendingRemoteCount} / ${mfInspectorIssueCount}`,
+      toneClass:
+        mfInspectorIssueCount > 0
+          ? "text-red-300"
+          : mfInspectorPendingRemoteCount > 0
+            ? "text-amber-300"
+            : "text-emerald-300",
+      hint: "First number is still loading/checking. Second number needs attention.",
+    },
+  ];
+
+  const renderMfInspectorTruthCell = (
+    sameInstance: boolean | null,
+    error: string | null,
+    loadState: "loading" | "success" | "error" | null,
+  ) => {
+    let label = "not requested";
+    let toneClass = "text-slate-400";
+    let dotClass = "bg-slate-500";
+
+    if (error || loadState === "error") {
+      label = "load failed";
+      toneClass = "text-red-400";
+      dotClass = "bg-red-400";
+    } else if (sameInstance === true) {
+      label = "same copy";
+      toneClass = "text-emerald-400";
+      dotClass = "bg-emerald-400";
+    } else if (sameInstance === false) {
+      label = "different copy";
+      toneClass = "text-red-400";
+      dotClass = "bg-red-400";
+    } else if (loadState === "loading") {
+      label = "loading";
+      toneClass = "text-amber-400";
+      dotClass = "bg-amber-400";
+    } else if (loadState === "success") {
+      label = "checking React";
+      toneClass = "text-amber-400";
+      dotClass = "bg-amber-400";
+    }
+
+    return (
+      <span
+        className={`inline-flex items-center gap-1 text-[10px] font-medium ${toneClass}`}
+      >
+        <span className={`w-1.5 h-1.5 rounded-full ${dotClass}`} />
+        {label}
+      </span>
+    );
+  };
 
   return (
     <div
@@ -2423,6 +3111,9 @@ export default function CodeRunnerModal() {
                     startPct: sbxSplit,
                     containerW,
                   };
+                  document.body.style.userSelect = "none";
+                  document.body.style.cursor = "col-resize";
+                  setIsDraggingResize(true);
                 }}
               />
             )}
@@ -3260,7 +3951,26 @@ export default function CodeRunnerModal() {
                               <button
                                 key={name}
                                 type="button"
-                                onClick={() => setMfPreviewApp(name)}
+                                onClick={() => {
+                                  setMfPreviewApp(name);
+                                  // Always imperatively set the iframe src so the
+                                  // page reloads even if the React-controlled src
+                                  // didn't change (e.g. clicking the active tab,
+                                  // or switching back to the same URL after SPA
+                                  // navigation). This lets React.lazy retry any
+                                  // previously-failed remote loads.
+                                  if (mfIframeRef.current && url) {
+                                    const target = url.endsWith("/")
+                                      ? url
+                                      : url + "/";
+                                    mfIframeRef.current.src =
+                                      target +
+                                      moduleFederationPreviewPath.replace(
+                                        /^\//,
+                                        "",
+                                      );
+                                  }
+                                }}
                                 className={`px-2 py-0.5 rounded text-[10px] font-mono transition-colors shrink-0 ${
                                   mfPreviewApp === name
                                     ? "bg-slate-700 text-slate-100"
@@ -3366,6 +4076,11 @@ export default function CodeRunnerModal() {
                               ref={nxIframeRef}
                               src={nxSandboxUrl + reactPreviewPath}
                               className="flex-1 min-h-0 w-full border-0 bg-white"
+                              style={
+                                isDraggingResize
+                                  ? { pointerEvents: "none" }
+                                  : undefined
+                              }
                               title="Next.js Preview"
                               onLoad={() => {
                                 try {
@@ -3390,6 +4105,11 @@ export default function CodeRunnerModal() {
                               ref={mfIframeRef}
                               src={moduleFederationPreviewUrl}
                               className="flex-1 min-h-0 w-full border-0 bg-white"
+                              style={
+                                isDraggingResize
+                                  ? { pointerEvents: "none" }
+                                  : undefined
+                              }
                               title="Webpack Module Federation Preview"
                             />
                           )}
@@ -3435,12 +4155,15 @@ export default function CodeRunnerModal() {
                 startH: outputCollapsed ? 0 : sbxOutputH,
               };
               if (outputCollapsed) setOutputCollapsed(false);
+              document.body.style.userSelect = "none";
+              document.body.style.cursor = "row-resize";
+              setIsDraggingResize(true);
             }}
           />
 
           {/* Sandbox output pane */}
           <div
-            className="bg-slate-950 flex flex-col overflow-hidden shrink-0 transition-[height]"
+            className="bg-slate-950 flex flex-col overflow-hidden shrink-0"
             style={{ height: outputCollapsed ? 0 : sbxOutputH }}
           >
             {/* Tab bar */}
@@ -3474,6 +4197,20 @@ export default function CodeRunnerModal() {
                   Console
                 </button>
               )}
+              {clientType === "module-federation" && (
+                <button
+                  type="button"
+                  onClick={() => setSbxBottomTab("inspector")}
+                  className={`flex items-center gap-1.5 px-3 py-1.5 text-[10px] uppercase tracking-wider font-medium border-b-2 transition-colors ${
+                    sbxBottomTab === "inspector"
+                      ? "border-amber-500 text-amber-300"
+                      : "border-transparent text-slate-500 hover:text-slate-300"
+                  }`}
+                >
+                  <Eye className="w-3 h-3" />
+                  Inspector
+                </button>
+              )}
               <button
                 type="button"
                 onClick={() => {
@@ -3497,6 +4234,30 @@ export default function CodeRunnerModal() {
               {sbxBottomTab === "console" && mfConsoleRunning && (
                 <Loader2 className="w-3 h-3 text-cyan-400 animate-spin mr-1" />
               )}
+              {sbxBottomTab === "inspector" && mfInspectorEvents.length > 0 && (
+                <div className="flex items-center gap-1 mr-1">
+                  <button
+                    type="button"
+                    onClick={() =>
+                      navigator.clipboard.writeText(
+                        JSON.stringify(mfInspectorEvents, null, 2),
+                      )
+                    }
+                    className="p-0.5 rounded text-slate-600 hover:text-slate-300 transition-colors"
+                    title="Copy inspector events"
+                  >
+                    <Copy className="w-3 h-3" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setMfInspectorEvents([])}
+                    className="p-0.5 rounded text-slate-600 hover:text-slate-300 transition-colors"
+                    title="Clear inspector events"
+                  >
+                    <Trash2 className="w-3 h-3" />
+                  </button>
+                </div>
+              )}
               {sbxBottomTab === "output" && sandboxOutput.length > 0 && (
                 <div className="flex items-center gap-1 mr-1">
                   <button
@@ -3616,6 +4377,1159 @@ export default function CodeRunnerModal() {
               </div>
             )}
 
+            {sbxBottomTab === "inspector" && (
+              <div className="flex-1 overflow-hidden flex flex-col text-[12px]">
+                {/* Sub-view selector + meta bar */}
+                <div className="shrink-0 flex items-center gap-2 px-3 py-1.5 border-b border-slate-800 bg-slate-900/80">
+                  <div className="flex items-center rounded overflow-hidden border border-slate-700 text-[10px]">
+                    {MF_INSPECTOR_VIEWS.map((view) => (
+                      <button
+                        key={view}
+                        type="button"
+                        onClick={() => setMfInspectorView(view)}
+                        title={MF_INSPECTOR_VIEW_COPY[view].description}
+                        className={`px-2.5 py-1 capitalize transition-colors ${
+                          mfInspectorView === view
+                            ? "bg-amber-500/20 text-amber-200"
+                            : "text-slate-500 hover:text-slate-300"
+                        }`}
+                      >
+                        {MF_INSPECTOR_VIEW_COPY[view].label}
+                      </button>
+                    ))}
+                  </div>
+                  <div className="flex items-center gap-2 ml-1 text-[10px] text-slate-500">
+                    <span>{mfInspectorEvents.length} timeline entries</span>
+                    <span>·</span>
+                    <span>
+                      {mfInspectorRuntimeCount} browser session
+                      {mfInspectorRuntimeCount !== 1 ? "s" : ""}
+                    </span>
+                    {mfInspectorSharedRemoteCount > 0 && (
+                      <>
+                        <span>·</span>
+                        <span className="text-emerald-400">
+                          {mfInspectorSharedRemoteCount} same React copy
+                        </span>
+                      </>
+                    )}
+                  </div>
+                  {mfPreviewApp !== "host" && mfInspectorView === "map" && (
+                    <span className="ml-auto text-[10px] text-amber-400/80 shrink-0 italic">
+                      Open the host preview to watch the host load remotes
+                    </span>
+                  )}
+                </div>
+
+                <div
+                  className={`shrink-0 border-b border-slate-800 bg-slate-950/60 px-3 ${
+                    mfInspectorGuideCollapsed ? "py-2" : "py-3"
+                  }`}
+                >
+                  <div className="rounded-xl border border-slate-800 bg-slate-900/60 px-3 py-3">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <div className="text-[10px] uppercase tracking-wider text-sky-300/80 mb-1">
+                          Beginner guide
+                        </div>
+                        <div className="text-[13px] font-semibold text-slate-100">
+                          {mfInspectorViewCopy.title}
+                        </div>
+                        {mfInspectorGuideCollapsed && (
+                          <p className="mt-1 text-[10px] text-slate-500 leading-relaxed">
+                            Guide hidden. Expand it if you want the beginner
+                            explanation and summary cards back.
+                          </p>
+                        )}
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => setMfInspectorGuideCollapsed((v) => !v)}
+                        className="shrink-0 inline-flex items-center gap-1 rounded border border-slate-700 bg-slate-950/70 px-2 py-1 text-[10px] text-slate-300 hover:text-slate-100 hover:border-slate-600 transition-colors"
+                        title={
+                          mfInspectorGuideCollapsed
+                            ? "Show beginner guide"
+                            : "Hide beginner guide"
+                        }
+                      >
+                        {mfInspectorGuideCollapsed ? (
+                          <ChevronDown className="w-3 h-3" />
+                        ) : (
+                          <ChevronUp className="w-3 h-3" />
+                        )}
+                        {mfInspectorGuideCollapsed ? "Show" : "Hide"}
+                      </button>
+                    </div>
+                    {!mfInspectorGuideCollapsed && (
+                      <>
+                        <p className="mt-1 text-[11px] text-slate-400 leading-relaxed max-w-3xl">
+                          {mfInspectorViewCopy.description}
+                        </p>
+                        <div className="mt-2 rounded-lg border border-slate-700/80 bg-slate-950/70 px-2.5 py-2 text-[10px] text-slate-300 leading-relaxed">
+                          <span className="font-semibold text-slate-100">
+                            What good looks like:
+                          </span>{" "}
+                          {mfPreviewApp !== "host" && mfInspectorView === "map"
+                            ? "You are previewing a remote directly right now. Switch back to the host page if you want to watch the host-to-remote lines move and update."
+                            : mfInspectorViewCopy.tip}
+                        </div>
+                        <div
+                          className="mt-3 grid gap-2"
+                          style={{
+                            gridTemplateColumns:
+                              "repeat(auto-fit, minmax(120px, 1fr))",
+                          }}
+                        >
+                          {mfInspectorSummaryCards.map((card) => (
+                            <div
+                              key={card.label}
+                              className="rounded-lg border border-slate-800 bg-slate-950/70 px-2.5 py-2"
+                            >
+                              <div className="text-[9px] uppercase tracking-wider text-slate-500">
+                                {card.label}
+                              </div>
+                              <div
+                                className={`mt-1 text-[13px] font-semibold ${card.toneClass}`}
+                              >
+                                {card.value}
+                              </div>
+                              <div className="mt-1 text-[10px] text-slate-500 leading-snug">
+                                {card.hint}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+
+                {/* View content */}
+                <div className="flex-1 overflow-y-auto">
+                  {/* ── MAP VIEW ── */}
+                  {mfInspectorView === "map" && (
+                    <div>
+                      {mfInspectorEvents.length === 0 && !mfSandboxId ? (
+                        <div className="flex flex-col items-center justify-center gap-2 py-8 text-center text-slate-500 px-4 text-[11px]">
+                          <Eye className="w-6 h-6 opacity-30" />
+                          <p>
+                            Start the webpack lab, then open the host page to
+                            watch the host load remotes step by step.
+                          </p>
+                        </div>
+                      ) : (
+                        <>
+                          {/* SVG Topology diagram */}
+                          {(() => {
+                            const W = 500;
+                            const hostY = 46;
+                            const remoteY = 156;
+                            const nodeW = 96;
+                            const nodeH = 46;
+                            const svgH = 220;
+                            const hostBooted = mfInspectorBootMap.has("host");
+                            const hostData = mfInspectorBootMap.get("host");
+
+                            const getConnectionStatus = (
+                              remoteName: string,
+                            ):
+                              | "idle"
+                              | "loading"
+                              | "success-shared"
+                              | "success-different"
+                              | "error" => {
+                              const keys =
+                                mfTopologyRemoteKeysByApp.get(remoteName) ?? [];
+                              type IdentityEntry = {
+                                sameReact: boolean;
+                                sameReactDom: boolean;
+                                error: string | null;
+                              };
+                              type LoadEntry = {
+                                status: string;
+                                durationMs: number | null;
+                              };
+                              const identityResults = keys
+                                .map((k) => mfInspectorIdentityResultMap.get(k))
+                                .filter(Boolean) as IdentityEntry[];
+                              const loadResults = keys
+                                .map((k) => mfInspectorRemoteLoadMap.get(k))
+                                .filter(Boolean) as LoadEntry[];
+                              if (identityResults.some((r) => r.error))
+                                return "error";
+                              if (identityResults.length > 0)
+                                return identityResults.every(
+                                  (r) => r.sameReact && r.sameReactDom,
+                                )
+                                  ? "success-shared"
+                                  : "success-different";
+                              if (loadResults.some((r) => r.status === "error"))
+                                return "error";
+                              if (
+                                loadResults.some(
+                                  (r) =>
+                                    r.status === "loading" ||
+                                    r.status === "success",
+                                )
+                              )
+                                return "loading";
+                              // Only show "loading" (amber) if the host has
+                              // actually attempted to load this remote. A
+                              // standalone boot event from the remote's own
+                              // dev server doesn't mean the HOST is loading it.
+                              return "idle";
+                            };
+
+                            const statusLineColors: Record<string, string> = {
+                              idle: "#334155",
+                              loading: "#d97706",
+                              "success-shared": "#10b981",
+                              "success-different": "#ef4444",
+                              error: "#ef4444",
+                            };
+
+                            const displayRemotes =
+                              mfTopologyRemoteNames.length > 0
+                                ? mfTopologyRemoteNames
+                                : ["profile", "checkout"];
+                            const isPlaceholder =
+                              mfTopologyRemoteNames.length === 0;
+
+                            const remotePositions = displayRemotes.map(
+                              (_, i) => {
+                                const step = W / (displayRemotes.length + 1);
+                                return step * (i + 1);
+                              },
+                            );
+
+                            return (
+                              <div className="px-2 pt-3 pb-1">
+                                <svg
+                                  viewBox={`0 0 ${W} ${svgH}`}
+                                  width="100%"
+                                  style={{ height: svgH, display: "block" }}
+                                >
+                                  {/* Connection lines */}
+                                  {displayRemotes.map((remoteName, i) => {
+                                    const rx = remotePositions[i];
+                                    const status = isPlaceholder
+                                      ? "idle"
+                                      : getConnectionStatus(remoteName);
+                                    const lineColor =
+                                      statusLineColors[status] ?? "#334155";
+                                    const isDashed = status === "idle";
+                                    const keys =
+                                      mfTopologyRemoteKeysByApp.get(
+                                        remoteName,
+                                      ) ?? [];
+                                    const loadResult = keys
+                                      .map((k) =>
+                                        mfInspectorRemoteLoadMap.get(k),
+                                      )
+                                      .find((r) => r?.durationMs != null);
+                                    const durationLabel =
+                                      loadResult?.durationMs != null
+                                        ? `${loadResult.durationMs}ms`
+                                        : "";
+                                    const midX = (W / 2 + rx) / 2;
+                                    const midY =
+                                      (hostY +
+                                        nodeH / 2 +
+                                        remoteY -
+                                        nodeH / 2) /
+                                      2;
+                                    return (
+                                      <g key={remoteName}>
+                                        <line
+                                          x1={W / 2}
+                                          y1={hostY + nodeH / 2}
+                                          x2={rx}
+                                          y2={remoteY - nodeH / 2}
+                                          stroke={lineColor}
+                                          strokeWidth={isDashed ? 1.5 : 2}
+                                          strokeDasharray={
+                                            isDashed ? "5 4" : undefined
+                                          }
+                                          strokeLinecap="round"
+                                          opacity={isPlaceholder ? 0.3 : 1}
+                                        />
+                                        {durationLabel && (
+                                          <text
+                                            x={midX}
+                                            y={midY - 5}
+                                            textAnchor="middle"
+                                            fill={lineColor}
+                                            fontSize={9}
+                                            fontFamily="ui-monospace, monospace"
+                                          >
+                                            {durationLabel}
+                                          </text>
+                                        )}
+                                      </g>
+                                    );
+                                  })}
+
+                                  {/* HOST node */}
+                                  <rect
+                                    x={W / 2 - nodeW / 2}
+                                    y={hostY - nodeH / 2}
+                                    width={nodeW}
+                                    height={nodeH}
+                                    rx={7}
+                                    fill={hostBooted ? "#0c2a3d" : "#0f172a"}
+                                    stroke={hostBooted ? "#38bdf8" : "#475569"}
+                                    strokeWidth={hostBooted ? 2 : 1}
+                                    opacity={isPlaceholder ? 0.5 : 1}
+                                  />
+                                  <text
+                                    x={W / 2}
+                                    y={hostY - 12}
+                                    textAnchor="middle"
+                                    fill={hostBooted ? "#e0f2fe" : "#94a3b8"}
+                                    fontSize={11}
+                                    fontWeight="700"
+                                    fontFamily="ui-monospace, monospace"
+                                  >
+                                    host
+                                  </text>
+                                  {hostData?.reactVersion && (
+                                    <text
+                                      x={W / 2}
+                                      y={hostY + 1}
+                                      textAnchor="middle"
+                                      fill="#7dd3fc"
+                                      fontSize={8}
+                                      fontFamily="ui-monospace, monospace"
+                                    >
+                                      {"⚛ React " + hostData.reactVersion}
+                                    </text>
+                                  )}
+                                  {hostData?.reactDomVersion && (
+                                    <text
+                                      x={W / 2}
+                                      y={hostY + 13}
+                                      textAnchor="middle"
+                                      fill="#7dd3fc"
+                                      fontSize={8}
+                                      fontFamily="ui-monospace, monospace"
+                                    >
+                                      {"▣ DOM " + hostData.reactDomVersion}
+                                    </text>
+                                  )}
+
+                                  {/* REMOTE nodes */}
+                                  {displayRemotes.map((remoteName, i) => {
+                                    const rx = remotePositions[i];
+                                    const status = isPlaceholder
+                                      ? "idle"
+                                      : getConnectionStatus(remoteName);
+                                    const remoteData =
+                                      mfInspectorBootMap.get(remoteName);
+                                    const keys =
+                                      mfTopologyRemoteKeysByApp.get(
+                                        remoteName,
+                                      ) ?? [];
+                                    const identityResult = keys
+                                      .map((k) =>
+                                        mfInspectorIdentityResultMap.get(k),
+                                      )
+                                      .find((r) => r != null);
+                                    const reactShared = identityResult
+                                      ? identityResult.sameReact
+                                      : null;
+                                    const domShared = identityResult
+                                      ? identityResult.sameReactDom
+                                      : null;
+                                    const bothShared =
+                                      reactShared === true &&
+                                      domShared === true;
+                                    const eitherDifferent =
+                                      reactShared === false ||
+                                      domShared === false;
+                                    const nodeFill = bothShared
+                                      ? "#052e16"
+                                      : eitherDifferent || status === "error"
+                                        ? "#450a0a"
+                                        : status === "loading"
+                                          ? "#1c1917"
+                                          : "#0f172a";
+                                    const nodeStroke = bothShared
+                                      ? "#16a34a"
+                                      : eitherDifferent || status === "error"
+                                        ? "#dc2626"
+                                        : status === "loading"
+                                          ? "#d97706"
+                                          : remoteData
+                                            ? "#818cf8"
+                                            : "#334155";
+                                    // Build per-library status label
+                                    const reactLabel =
+                                      reactShared === true
+                                        ? "\u2713 React"
+                                        : reactShared === false
+                                          ? "\u2717 React"
+                                          : status === "loading"
+                                            ? "React\u2026"
+                                            : "";
+                                    const domLabel =
+                                      domShared === true
+                                        ? "\u2713 DOM"
+                                        : domShared === false
+                                          ? "\u2717 DOM"
+                                          : status === "loading"
+                                            ? "DOM\u2026"
+                                            : "";
+                                    const statusLabel =
+                                      status === "error"
+                                        ? "\u2717 error"
+                                        : [reactLabel, domLabel]
+                                            .filter(Boolean)
+                                            .join("  ");
+                                    const reactLabelColor =
+                                      reactShared === true
+                                        ? "#4ade80"
+                                        : reactShared === false
+                                          ? "#f87171"
+                                          : "#fbbf24";
+                                    const domLabelColor =
+                                      domShared === true
+                                        ? "#4ade80"
+                                        : domShared === false
+                                          ? "#f87171"
+                                          : "#fbbf24";
+                                    const reactVer =
+                                      remoteData?.reactVersion ??
+                                      identityResult?.reactVersion;
+                                    const reactDomVer =
+                                      remoteData?.reactDomVersion ??
+                                      identityResult?.reactDomVersion;
+
+                                    return (
+                                      <g
+                                        key={remoteName}
+                                        opacity={isPlaceholder ? 0.35 : 1}
+                                      >
+                                        <rect
+                                          x={rx - nodeW / 2}
+                                          y={remoteY - nodeH / 2}
+                                          width={nodeW}
+                                          height={nodeH}
+                                          rx={7}
+                                          fill={nodeFill}
+                                          stroke={nodeStroke}
+                                          strokeWidth={
+                                            status !== "idle" ? 2 : 1
+                                          }
+                                        />
+                                        <text
+                                          x={rx}
+                                          y={remoteY - 13}
+                                          textAnchor="middle"
+                                          fill="#e2e8f0"
+                                          fontSize={11}
+                                          fontWeight="700"
+                                          fontFamily="ui-monospace, monospace"
+                                        >
+                                          {remoteName}
+                                        </text>
+                                        {/* React row */}
+                                        <text
+                                          x={rx - nodeW / 2 + 8}
+                                          y={remoteY + 2}
+                                          fill={
+                                            reactShared === true
+                                              ? "#4ade80"
+                                              : reactShared === false
+                                                ? "#f87171"
+                                                : "#64748b"
+                                          }
+                                          fontSize={8}
+                                          fontFamily="ui-monospace, monospace"
+                                        >
+                                          ⚛
+                                        </text>
+                                        <text
+                                          x={rx - nodeW / 2 + 19}
+                                          y={remoteY + 2}
+                                          fill="#94a3b8"
+                                          fontSize={8}
+                                          fontFamily="ui-monospace, monospace"
+                                        >
+                                          {reactVer
+                                            ? "React " + reactVer
+                                            : "React"}
+                                        </text>
+                                        {reactShared !== null && (
+                                          <text
+                                            x={rx + nodeW / 2 - 6}
+                                            y={remoteY + 2}
+                                            textAnchor="end"
+                                            fill={
+                                              reactShared
+                                                ? "#4ade80"
+                                                : "#f87171"
+                                            }
+                                            fontSize={8}
+                                            fontFamily="ui-monospace, monospace"
+                                          >
+                                            {reactShared ? "\u2713" : "\u2717"}
+                                          </text>
+                                        )}
+                                        {/* ReactDOM row */}
+                                        <text
+                                          x={rx - nodeW / 2 + 8}
+                                          y={remoteY + 14}
+                                          fill={
+                                            domShared === true
+                                              ? "#4ade80"
+                                              : domShared === false
+                                                ? "#f87171"
+                                                : "#64748b"
+                                          }
+                                          fontSize={8}
+                                          fontFamily="ui-monospace, monospace"
+                                        >
+                                          ▣
+                                        </text>
+                                        <text
+                                          x={rx - nodeW / 2 + 19}
+                                          y={remoteY + 14}
+                                          fill="#94a3b8"
+                                          fontSize={8}
+                                          fontFamily="ui-monospace, monospace"
+                                        >
+                                          {reactDomVer
+                                            ? "DOM " + reactDomVer
+                                            : "ReactDOM"}
+                                        </text>
+                                        {domShared !== null && (
+                                          <text
+                                            x={rx + nodeW / 2 - 6}
+                                            y={remoteY + 14}
+                                            textAnchor="end"
+                                            fill={
+                                              domShared ? "#4ade80" : "#f87171"
+                                            }
+                                            fontSize={8}
+                                            fontFamily="ui-monospace, monospace"
+                                          >
+                                            {domShared ? "\u2713" : "\u2717"}
+                                          </text>
+                                        )}
+                                        {/* Status label below node — show per-lib check marks */}
+                                        {(statusLabel ||
+                                          status === "loading") && (
+                                          <g>
+                                            {reactLabel && (
+                                              <text
+                                                x={rx - 20}
+                                                y={remoteY + nodeH / 2 + 14}
+                                                textAnchor="middle"
+                                                fill={reactLabelColor}
+                                                fontSize={8.5}
+                                                fontFamily="ui-monospace, monospace"
+                                              >
+                                                {reactLabel}
+                                              </text>
+                                            )}
+                                            {domLabel && (
+                                              <text
+                                                x={rx + 22}
+                                                y={remoteY + nodeH / 2 + 14}
+                                                textAnchor="middle"
+                                                fill={domLabelColor}
+                                                fontSize={8.5}
+                                                fontFamily="ui-monospace, monospace"
+                                              >
+                                                {domLabel}
+                                              </text>
+                                            )}
+                                            {status === "error" && (
+                                              <text
+                                                x={rx}
+                                                y={remoteY + nodeH / 2 + 14}
+                                                textAnchor="middle"
+                                                fill="#f87171"
+                                                fontSize={8.5}
+                                                fontFamily="ui-monospace, monospace"
+                                              >
+                                                ✕ error
+                                              </text>
+                                            )}
+                                          </g>
+                                        )}
+                                      </g>
+                                    );
+                                  })}
+
+                                  {/* Legend strip */}
+                                  {(
+                                    [
+                                      {
+                                        color: "#334155",
+                                        label: "not asked yet",
+                                        dash: true,
+                                      },
+                                      {
+                                        color: "#d97706",
+                                        label: "loading / checking",
+                                        dash: false,
+                                      },
+                                      {
+                                        color: "#10b981",
+                                        label: "same React copy",
+                                        dash: false,
+                                      },
+                                      {
+                                        color: "#ef4444",
+                                        label: "different / error",
+                                        dash: false,
+                                      },
+                                    ] as Array<{
+                                      color: string;
+                                      label: string;
+                                      dash: boolean;
+                                    }>
+                                  ).map(
+                                    ({ color, label, dash: isDash }, li) => (
+                                      <g
+                                        key={li}
+                                        transform={`translate(${li * 126}, ${svgH - 11})`}
+                                      >
+                                        <line
+                                          x1={0}
+                                          y1={0}
+                                          x2={14}
+                                          y2={0}
+                                          stroke={color}
+                                          strokeWidth={2}
+                                          strokeDasharray={
+                                            isDash ? "4 3" : undefined
+                                          }
+                                          strokeLinecap="round"
+                                        />
+                                        <text
+                                          x={18}
+                                          y={1}
+                                          fill="#475569"
+                                          fontSize={8.5}
+                                          fontFamily="ui-sans-serif, sans-serif"
+                                          dominantBaseline="middle"
+                                        >
+                                          {label}
+                                        </text>
+                                      </g>
+                                    ),
+                                  )}
+                                </svg>
+                              </div>
+                            );
+                          })()}
+
+                          {/* Instance-sharing truth table */}
+                          {mfInspectorRemoteTableKeys.length > 0 && (
+                            <div className="px-3 pb-3">
+                              <div className="text-[10px] uppercase tracking-wider text-slate-500 mb-2">
+                                Did the host and remote reuse the same React
+                                copy?
+                              </div>
+                              <div className="text-[11px] text-slate-500 mb-2 leading-relaxed">
+                                "Same copy" is the healthy result for React and
+                                ReactDOM. "Different copy" often leads to hook,
+                                context, or shared-state bugs.
+                              </div>
+                              <div className="rounded-lg border border-slate-800 overflow-hidden">
+                                <table className="w-full text-[11px]">
+                                  <thead>
+                                    <tr className="border-b border-slate-800 bg-slate-900/80">
+                                      <th className="text-left px-3 py-1.5 text-slate-400 font-medium">
+                                        Remote module
+                                      </th>
+                                      <th className="text-left px-3 py-1.5 text-slate-400 font-medium">
+                                        React copy
+                                      </th>
+                                      <th className="text-left px-3 py-1.5 text-slate-400 font-medium">
+                                        DOM copy
+                                      </th>
+                                      <th className="text-left px-3 py-1.5 text-slate-400 font-medium">
+                                        Version seen
+                                      </th>
+                                      <th className="text-left px-3 py-1.5 text-slate-400 font-medium">
+                                        Load time
+                                      </th>
+                                    </tr>
+                                  </thead>
+                                  <tbody>
+                                    {mfInspectorRemoteTableKeys.map(
+                                      (remoteKey) => {
+                                        const result =
+                                          mfInspectorIdentityResultMap.get(
+                                            remoteKey,
+                                          ) ?? null;
+                                        const loadInfo =
+                                          mfInspectorRemoteLoadMap.get(
+                                            remoteKey,
+                                          );
+                                        return (
+                                          <tr
+                                            key={remoteKey}
+                                            className="border-b border-slate-800/50 last:border-0"
+                                          >
+                                            <td className="px-3 py-2 font-mono text-slate-200">
+                                              {remoteKey}
+                                            </td>
+                                            <td className="px-3 py-2">
+                                              {renderMfInspectorTruthCell(
+                                                result?.sameReact ?? null,
+                                                result?.error ?? null,
+                                                loadInfo?.status ?? null,
+                                              )}
+                                            </td>
+                                            <td className="px-3 py-2">
+                                              {renderMfInspectorTruthCell(
+                                                result?.sameReactDom ?? null,
+                                                result?.error ?? null,
+                                                loadInfo?.status ?? null,
+                                              )}
+                                            </td>
+                                            <td className="px-3 py-2 font-mono text-slate-400 text-[10px]">
+                                              {result?.reactVersion ??
+                                                (loadInfo?.status ===
+                                                  "loading" ||
+                                                loadInfo?.status === "success"
+                                                  ? "checking..."
+                                                  : "\u2014")}
+                                            </td>
+                                            <td className="px-3 py-2 font-mono text-slate-400 text-[10px]">
+                                              {loadInfo?.durationMs != null
+                                                ? `${loadInfo.durationMs}ms`
+                                                : loadInfo?.status === "loading"
+                                                  ? "loading..."
+                                                  : "\u2014"}
+                                            </td>
+                                          </tr>
+                                        );
+                                      },
+                                    )}
+                                  </tbody>
+                                </table>
+                              </div>
+                            </div>
+                          )}
+
+                          {/* Declared config cards */}
+                          {mfInspectorDeclaredConfigs.length > 0 && (
+                            <div className="px-3 pb-3">
+                              <div className="text-[10px] uppercase tracking-wider text-slate-500 mb-2">
+                                What each app promised in webpack config
+                              </div>
+                              <div className="text-[11px] text-slate-500 mb-2 leading-relaxed">
+                                This is the static setup from config files,
+                                before the browser proves anything at runtime.
+                              </div>
+                              <div
+                                className="grid gap-2"
+                                style={{
+                                  gridTemplateColumns:
+                                    "repeat(auto-fill, minmax(160px, 1fr))",
+                                }}
+                              >
+                                {mfInspectorDeclaredConfigs.map(
+                                  ({ app, declaredConfig }) => {
+                                    const remotes = Object.keys(
+                                      asInspectorRecord(declaredConfig.remotes),
+                                    );
+                                    const exposes = asInspectorStringArray(
+                                      declaredConfig.exposes,
+                                    );
+                                    const sharedPkgs = Object.keys(
+                                      asInspectorRecord(declaredConfig.shared),
+                                    );
+                                    return (
+                                      <div
+                                        key={app}
+                                        className="rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2.5 text-[11px]"
+                                      >
+                                        <div className="font-semibold text-slate-100 font-mono mb-2">
+                                          {app}
+                                        </div>
+                                        {remotes.length > 0 && (
+                                          <div className="mb-1.5">
+                                            <div className="text-[9px] text-slate-500 uppercase tracking-wider mb-1">
+                                              can call these remotes
+                                            </div>
+                                            <div className="flex flex-wrap gap-1">
+                                              {remotes.map((r) => (
+                                                <span
+                                                  key={r}
+                                                  className="rounded bg-cyan-500/10 border border-cyan-500/20 px-1.5 py-0.5 text-cyan-300 text-[10px] font-mono"
+                                                >
+                                                  {r}
+                                                </span>
+                                              ))}
+                                            </div>
+                                          </div>
+                                        )}
+                                        {exposes.length > 0 && (
+                                          <div className="mb-1.5">
+                                            <div className="text-[9px] text-slate-500 uppercase tracking-wider mb-1">
+                                              offers these modules
+                                            </div>
+                                            <div className="flex flex-wrap gap-1">
+                                              {exposes.map((e) => (
+                                                <span
+                                                  key={e}
+                                                  className="rounded bg-violet-500/10 border border-violet-500/20 px-1.5 py-0.5 text-violet-300 text-[10px] font-mono"
+                                                >
+                                                  {e}
+                                                </span>
+                                              ))}
+                                            </div>
+                                          </div>
+                                        )}
+                                        {sharedPkgs.length > 0 && (
+                                          <div>
+                                            <div className="text-[9px] text-slate-500 uppercase tracking-wider mb-1">
+                                              wants to share (
+                                              {sharedPkgs.length})
+                                            </div>
+                                            <div className="flex flex-wrap gap-1">
+                                              {sharedPkgs.map((p) => {
+                                                const cfg = asInspectorRecord(
+                                                  asInspectorRecord(
+                                                    declaredConfig.shared,
+                                                  )[p],
+                                                );
+                                                const singleton =
+                                                  cfg.singleton === true;
+                                                return (
+                                                  <span
+                                                    key={p}
+                                                    className={`rounded border px-1.5 py-0.5 text-[10px] font-mono ${
+                                                      singleton
+                                                        ? "border-amber-500/30 bg-amber-500/10 text-amber-200"
+                                                        : "border-slate-700 bg-slate-800/50 text-slate-300"
+                                                    }`}
+                                                  >
+                                                    {p}
+                                                    {singleton
+                                                      ? " \u00b7 one copy"
+                                                      : ""}
+                                                  </span>
+                                                );
+                                              })}
+                                            </div>
+                                          </div>
+                                        )}
+                                      </div>
+                                    );
+                                  },
+                                )}
+                              </div>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </div>
+                  )}
+
+                  {/* ── SHARES VIEW ── */}
+                  {mfInspectorView === "shares" && (
+                    <div className="px-3 py-3">
+                      {!mfShareScopeForMatrix ? (
+                        <div className="flex flex-col items-center justify-center gap-2 py-8 text-center text-slate-500 text-[11px]">
+                          <div className="opacity-20 text-3xl select-none">
+                            ⚛
+                          </div>
+                          <p>
+                            Open the host preview first to populate webpack's
+                            live shared-package list.
+                          </p>
+                          <p className="text-[10px] text-slate-600">
+                            The inspector reads webpack&apos;s live{" "}
+                            <code className="font-mono">
+                              __webpack_share_scopes__
+                            </code>{" "}
+                            registry at runtime.
+                          </p>
+                        </div>
+                      ) : (
+                        <>
+                          <div className="rounded-lg border border-slate-800 bg-slate-900/50 px-3 py-2.5 mb-3">
+                            <div className="text-[12px] font-semibold text-slate-100">
+                              Live shared package list
+                            </div>
+                            <p className="mt-1 text-[11px] text-slate-400 leading-relaxed">
+                              This is webpack's runtime list of libraries that
+                              apps can reuse. It is more trustworthy than config
+                              alone because it shows what actually happened in
+                              the browser.
+                            </p>
+                            <p className="mt-1 text-[10px] text-slate-500">
+                              Snapshot source:{" "}
+                              <span className="text-amber-300 font-mono">
+                                {mfShareScopeForMatrix.app}
+                              </span>{" "}
+                              at{" "}
+                              {formatInspectorTimestamp(
+                                mfShareScopeForMatrix.timestamp,
+                              )}
+                            </p>
+                          </div>
+                          {Object.entries(mfShareScopeForMatrix.shareScopes)
+                            .filter(([sn]) => sn !== "__error")
+                            .map(([scopeName, scopeValue]) => {
+                              const packages = Object.entries(
+                                asInspectorRecord(scopeValue),
+                              );
+                              return (
+                                <div key={scopeName} className="mb-4">
+                                  <div className="text-[10px] text-slate-500 uppercase tracking-wider mb-2 font-mono">
+                                    sharing group: {scopeName}
+                                  </div>
+                                  <div className="rounded-lg border border-slate-800 overflow-hidden">
+                                    <table className="w-full text-[11px]">
+                                      <thead>
+                                        <tr className="bg-slate-900/80 border-b border-slate-800">
+                                          <th className="text-left px-3 py-1.5 text-slate-400 font-medium w-32">
+                                            Package
+                                          </th>
+                                          <th className="text-left px-3 py-1.5 text-slate-400 font-medium">
+                                            Versions webpack can reuse
+                                          </th>
+                                        </tr>
+                                      </thead>
+                                      <tbody>
+                                        {packages.map(
+                                          ([pkgName, versionValue]) => {
+                                            const versionEntries =
+                                              Array.isArray(versionValue)
+                                                ? versionValue
+                                                : [];
+                                            const declaredSingleton =
+                                              mfInspectorDeclaredConfigs.some(
+                                                (cfg) => {
+                                                  const sh = asInspectorRecord(
+                                                    asInspectorRecord(
+                                                      cfg.declaredConfig,
+                                                    ).shared,
+                                                  );
+                                                  return (
+                                                    asInspectorRecord(
+                                                      sh[pkgName],
+                                                    ).singleton === true
+                                                  );
+                                                },
+                                              );
+                                            const loadedCount =
+                                              versionEntries.filter(
+                                                (ve) =>
+                                                  asInspectorRecord(ve)
+                                                    .loaded === true,
+                                              ).length;
+                                            return (
+                                              <tr
+                                                key={pkgName}
+                                                className="border-b border-slate-800/50 last:border-0"
+                                              >
+                                                <td className="px-3 py-2.5 align-top">
+                                                  <div className="font-mono text-slate-100 font-medium">
+                                                    {pkgName}
+                                                  </div>
+                                                  <div className="flex flex-wrap gap-1 mt-1">
+                                                    {declaredSingleton && (
+                                                      <span className="rounded border border-amber-500/30 bg-amber-500/10 px-1 py-0.5 text-[9px] text-amber-300">
+                                                        one copy preferred
+                                                      </span>
+                                                    )}
+                                                    <span className="rounded border border-slate-700 bg-slate-800/50 px-1 py-0.5 text-[9px] text-slate-400">
+                                                      {loadedCount}/
+                                                      {versionEntries.length}{" "}
+                                                      already used
+                                                    </span>
+                                                  </div>
+                                                </td>
+                                                <td className="px-3 py-2.5">
+                                                  <div className="flex flex-wrap gap-2">
+                                                    {versionEntries.length ===
+                                                    0 ? (
+                                                      <span className="text-slate-600">
+                                                        none yet
+                                                      </span>
+                                                    ) : (
+                                                      versionEntries.map(
+                                                        (ve, vi) => {
+                                                          const vr =
+                                                            asInspectorRecord(
+                                                              ve,
+                                                            );
+                                                          const version =
+                                                            typeof vr.version ===
+                                                            "string"
+                                                              ? vr.version
+                                                              : "?";
+                                                          const from =
+                                                            typeof vr.from ===
+                                                            "string"
+                                                              ? vr.from
+                                                              : null;
+                                                          const loaded =
+                                                            vr.loaded === true;
+                                                          const eager =
+                                                            vr.eager === true;
+                                                          return (
+                                                            <div
+                                                              key={vi}
+                                                              className={`rounded-lg border px-2 py-1.5 font-mono text-[10px] ${
+                                                                loaded
+                                                                  ? "border-emerald-500/30 bg-emerald-500/5"
+                                                                  : "border-slate-700 bg-slate-800/40"
+                                                              }`}
+                                                            >
+                                                              <div
+                                                                className={`font-semibold ${loaded ? "text-emerald-200" : "text-slate-400"}`}
+                                                              >
+                                                                {version}
+                                                              </div>
+                                                              {from && (
+                                                                <div className="text-slate-500 mt-0.5 text-[9px]">
+                                                                  registered by{" "}
+                                                                  {from}
+                                                                </div>
+                                                              )}
+                                                              <div className="flex gap-1 mt-1">
+                                                                <span
+                                                                  className={`rounded px-1 py-0.5 text-[8px] ${
+                                                                    loaded
+                                                                      ? "bg-emerald-500/20 text-emerald-300"
+                                                                      : "bg-slate-700 text-slate-500"
+                                                                  }`}
+                                                                >
+                                                                  {loaded
+                                                                    ? "in use"
+                                                                    : "registered"}
+                                                                </span>
+                                                                <span
+                                                                  className={`rounded px-1 py-0.5 text-[8px] ${
+                                                                    eager
+                                                                      ? "bg-amber-500/20 text-amber-300"
+                                                                      : "bg-slate-800 text-slate-600"
+                                                                  }`}
+                                                                >
+                                                                  {eager
+                                                                    ? "load now"
+                                                                    : "load later"}
+                                                                </span>
+                                                              </div>
+                                                            </div>
+                                                          );
+                                                        },
+                                                      )
+                                                    )}
+                                                  </div>
+                                                </td>
+                                              </tr>
+                                            );
+                                          },
+                                        )}
+                                      </tbody>
+                                    </table>
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          {typeof mfShareScopeForMatrix.shareScopes.__error ===
+                            "string" && (
+                            <div className="rounded border border-red-500/20 bg-red-500/10 px-3 py-2 text-[11px] text-red-200">
+                              {mfShareScopeForMatrix.shareScopes.__error}
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </div>
+                  )}
+
+                  {/* ── EVENTS VIEW ── */}
+                  {mfInspectorView === "events" && (
+                    <div className="py-2 px-2">
+                      {mfInspectorRecentEvents.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center gap-2 py-8 text-center text-slate-500 text-[11px]">
+                          <Terminal className="w-5 h-5 opacity-30" />
+                          <p>
+                            No browser events yet. Start the webpack lab, then
+                            open the host page.
+                          </p>
+                        </div>
+                      ) : (
+                        <div className="space-y-2">
+                          <div className="px-1 text-[10px] text-slate-500 leading-relaxed">
+                            Newest first. Read each row as: who said something,
+                            what happened, and why that step matters.
+                          </div>
+                          {mfInspectorRecentEvents.map((event) => {
+                            const leftBorderColor = event.kind.includes("error")
+                              ? "border-l-red-500"
+                              : event.kind === "identity-check"
+                                ? "border-l-emerald-500"
+                                : event.kind === "remote-load-success"
+                                  ? "border-l-cyan-500"
+                                  : event.kind === "share-snapshot"
+                                    ? "border-l-amber-500"
+                                    : event.kind === "runtime-boot"
+                                      ? "border-l-sky-500"
+                                      : "border-l-slate-700";
+                            const appColor =
+                              event.app === "host"
+                                ? "text-sky-400"
+                                : "text-violet-400";
+                            return (
+                              <div
+                                key={`${event.runtimeId}-${event.timestamp}-${event.kind}`}
+                                className={`flex gap-3 rounded-lg border border-slate-800 bg-slate-900/40 px-3 py-2 border-l-2 hover:bg-slate-800/30 transition-colors ${leftBorderColor}`}
+                              >
+                                <div className="shrink-0 text-[10px] font-mono text-slate-600 w-16 pt-0.5">
+                                  {formatInspectorTimestamp(event.timestamp)}
+                                </div>
+                                <div className="min-w-0 flex-1">
+                                  <div className="flex flex-wrap items-center gap-1.5 text-[10px]">
+                                    <span
+                                      className={`font-mono font-semibold ${appColor}`}
+                                    >
+                                      {formatMfInspectorAppLabel(event.app)}
+                                    </span>
+                                    <span
+                                      title={`Raw event name: ${event.kind}`}
+                                      className={`rounded px-1.5 py-0.5 ${getMfInspectorBadgeClass(event.kind)}`}
+                                    >
+                                      {getMfInspectorFriendlyKindLabel(
+                                        event.kind,
+                                      )}
+                                    </span>
+                                    {event.route && event.route !== "/" && (
+                                      <span className="font-mono text-slate-600">
+                                        on {event.route}
+                                      </span>
+                                    )}
+                                  </div>
+                                  <div className="mt-1 text-[11px] text-slate-300 leading-relaxed">
+                                    {describeMfInspectorEvent(event)}
+                                  </div>
+                                  <div className="mt-1 text-[10px] text-slate-500 leading-relaxed">
+                                    Why it matters:{" "}
+                                    {explainMfInspectorEvent(event)}
+                                  </div>
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
             {sbxBottomTab === "console" && (
               <div className="flex-1 min-h-0 flex flex-col">
                 <div className="shrink-0 border-b border-slate-800 bg-slate-900/70 px-3 py-2 flex items-center gap-2">