create-interview-cockpit 0.10.0 → 0.12.0

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

@@ -56,6 +56,11 @@ import {
   updateNextjsFiles,
   updateModuleFederationFiles,
   stopNextjsSandbox,
+  startReactLabSandbox,
+  updateReactLabFiles,
+  streamReactLabCommand,
+  stopReactLabSandbox,
+  readReactLabFile,
 } from "../api";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -646,6 +651,15 @@ export default function CodeRunnerModal() {
   const [reactNavInput, setReactNavInput] = useState("/");
   const [reactNavHistory, setReactNavHistory] = useState<string[]>(["/"]);
   const [reactNavIndex, setReactNavIndex] = useState(0);
+  // Real Vite dev-server state (React lab)
+  const [viteSandboxId, setViteSandboxId] = useState<string | null>(null);
+  const [viteSandboxUrl, setViteSandboxUrl] = useState<string | null>(null);
+  const [viteStarting, setViteStarting] = useState(false);
+  const [viteError, setViteError] = useState<string | null>(null);
+  const [viteConsoleCommand, setViteConsoleCommand] = useState("npm install");
+  const [viteConsoleOutput, setViteConsoleOutput] = useState<OutputLine[]>([]);
+  const [viteConsoleRunning, setViteConsoleRunning] = useState(false);
+  const viteIframeRef = useRef<HTMLIFrameElement>(null);
 
   // ── Sandbox output tab ("output" | "console" | "chat") ─────────────
   const [sbxBottomTab, setSbxBottomTab] = useState<SbxBottomTab>("output");
@@ -873,6 +887,13 @@ export default function CodeRunnerModal() {
       }
       setReactPreviewSrc(null);
       setReactClientTab("edit");
+      if (ct === "react") {
+        setViteSandboxId(null);
+        setViteSandboxUrl(null);
+        setViteError(null);
+        setViteConsoleOutput([]);
+        setViteConsoleRunning(false);
+      }
       if (ct === "module-federation") {
         setServerCollapsed(true);
         setClientCollapsed(false);
@@ -901,7 +922,13 @@ export default function CodeRunnerModal() {
     if (sbxBottomTab === "console") {
       mfConsoleEndRef.current?.scrollIntoView({ behavior: "smooth" });
     }
-  }, [mfConsoleOutput, mfConsoleRunning, sbxBottomTab]);
+  }, [
+    mfConsoleOutput,
+    viteConsoleOutput,
+    mfConsoleRunning,
+    viteConsoleRunning,
+    sbxBottomTab,
+  ]);
 
   useEffect(() => {
     if (clientType !== "module-federation") return;
@@ -1278,7 +1305,11 @@ export default function CodeRunnerModal() {
       return files["app/page.tsx"]
         ? "app/page.tsx"
         : (Object.keys(files)[0] ?? "");
-    return files["App.tsx"] ? "App.tsx" : (Object.keys(files)[0] ?? "");
+    return files["main.tsx"]
+      ? "main.tsx"
+      : files["App.tsx"]
+        ? "App.tsx"
+        : (Object.keys(files)[0] ?? "");
   };
 
   const refreshPreview = useCallback(
@@ -1325,6 +1356,15 @@ export default function CodeRunnerModal() {
         entry = resolved;
       } else {
         entry = getReactEntry(reactFiles, type);
+        if (
+          entry === "main.tsx" &&
+          !/export\s+function\s+mount\s*\(/.test(reactFiles[entry] ?? "") &&
+          reactFiles["App.tsx"]
+        ) {
+          // Compatibility path for older React labs created before main.tsx
+          // exported an explicit mount() entry contract.
+          entry = "App.tsx";
+        }
       }
       if (!entry) return;
       const html = generatePreviewHTML(
@@ -1349,6 +1389,19 @@ export default function CodeRunnerModal() {
     }
   }, [reactFiles, reactClientTab, reactPreviewSrc, refreshPreview]);
 
+  // Auto-sync file edits to the running Vite server (HMR picks them up)
+  const viteFileSyncTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (!viteSandboxId) return;
+    if (viteFileSyncTimer.current) clearTimeout(viteFileSyncTimer.current);
+    viteFileSyncTimer.current = setTimeout(() => {
+      void updateReactLabFiles(viteSandboxId, reactFiles);
+    }, 400);
+    return () => {
+      if (viteFileSyncTimer.current) clearTimeout(viteFileSyncTimer.current);
+    };
+  }, [reactFiles, viteSandboxId]);
+
   /** Navigate to a new path (updates URL bar + history + re-renders preview). */
   const navigatePreview = useCallback(
     (to: string) => {
@@ -1365,12 +1418,23 @@ export default function CodeRunnerModal() {
     [reactNavIndex, refreshPreview],
   );
 
-  // Listen for rlab-nav messages from the preview iframe
+  // Listen for rlab-nav and rlab-err messages from the preview iframe
   useEffect(() => {
     const handler = (e: MessageEvent) => {
       if (e.data?.type === "rlab-nav" && typeof e.data.to === "string") {
         navigatePreview(e.data.to);
       }
+      if (e.data?.type === "rlab-err" && typeof e.data.error === "string") {
+        setOutput((prev) => [
+          ...prev,
+          {
+            kind: "stderr",
+            text: `Preview error: ${e.data.error}`,
+            source: "client",
+          },
+        ]);
+        setSbxBottomTab("output");
+      }
     };
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
@@ -1782,16 +1846,84 @@ export default function CodeRunnerModal() {
         current === "console" || current === "inspector" ? "output" : current,
       );
     }
-  }, [clientType, nxSandboxId, mfSandboxId]);
+    if (prev === "react" && clientType !== "react" && viteSandboxId) {
+      void stopReactLabSandbox(viteSandboxId);
+      setViteSandboxId(null);
+      setViteSandboxUrl(null);
+      setViteConsoleRunning(false);
+      setSbxBottomTab((current) =>
+        current === "console" ? "output" : current,
+      );
+    }
+  }, [clientType, nxSandboxId, mfSandboxId, viteSandboxId]);
 
   // Clean up on unmount
   useEffect(() => {
     return () => {
       if (nxSandboxId) void stopNextjsSandbox(nxSandboxId);
       if (mfSandboxId) void stopModuleFederationSandbox(mfSandboxId);
+      if (viteSandboxId) void stopReactLabSandbox(viteSandboxId);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [nxSandboxId, mfSandboxId]);
+  }, [nxSandboxId, mfSandboxId, viteSandboxId]);
+
+  const startViteServer = useCallback(async () => {
+    if (viteStarting) return;
+    setViteStarting(true);
+    setViteError(null);
+    setViteConsoleOutput([]);
+    try {
+      const info = await startReactLabSandbox(reactFiles);
+      setViteSandboxId(info.id);
+      setViteSandboxUrl(info.url);
+      setReactClientTab("preview");
+    } catch (err: any) {
+      setViteError(err?.message ?? String(err));
+    } finally {
+      setViteStarting(false);
+    }
+  }, [viteStarting, reactFiles]);
+
+  const runViteCommand = useCallback(async () => {
+    if (!viteSandboxId || viteConsoleRunning) return;
+    const command = viteConsoleCommand.trim();
+    if (!command) return;
+    setViteError(null);
+    setViteConsoleRunning(true);
+    setSbxBottomTab("console");
+    try {
+      await streamReactLabCommand({ id: viteSandboxId, command }, (message) => {
+        if (message.type === "output") {
+          setViteConsoleOutput((prev) => [
+            ...prev,
+            { kind: message.kind, text: message.text, source: "server" },
+          ]);
+        } else if (message.type === "error") {
+          setViteConsoleOutput((prev) => [
+            ...prev,
+            { kind: "stderr", text: message.error, source: "server" },
+          ]);
+        }
+      });
+      // After any npm command that mutates dependencies, read package.json back
+      // from disk so the editor reflects what npm actually wrote.
+      const tokens = command.trim().split(/\s+/);
+      const sub = tokens[1];
+      if (
+        sub &&
+        /^(install|i|uninstall|un|remove|rm|r|update|up|upgrade|add)$/.test(sub)
+      ) {
+        const updated = await readReactLabFile(viteSandboxId, "package.json");
+        if (updated !== null) {
+          setReactFiles((prev) => ({ ...prev, "package.json": updated }));
+        }
+      }
+    } catch (err: any) {
+      setViteError(err?.message ?? String(err));
+    } finally {
+      setViteConsoleRunning(false);
+    }
+  }, [viteConsoleCommand, viteConsoleRunning, viteSandboxId]);
 
   const handleClientTypeChange = useCallback(
     (ct: FrontendClientType) => {
@@ -1808,6 +1940,10 @@ export default function CodeRunnerModal() {
           current === "console" || current === "inspector" ? "output" : current,
         );
       }
+      if (ct !== "react") {
+        setViteConsoleOutput([]);
+        setViteConsoleRunning(false);
+      }
       if (ct !== "script") {
         const defs = defaultForType(ct);
         setReactFiles(defs.files);
@@ -2111,6 +2247,10 @@ export default function CodeRunnerModal() {
   const isActiveModuleFederationGeneratedFile =
     clientType === "module-federation" &&
     moduleFederationGeneratedFileSet.has(reactActiveFile);
+  const usesClientExplorer =
+    clientType === "react" ||
+    clientType === "nextjs" ||
+    clientType === "module-federation";
   const mfInspectorRuntimeCount = new Set(
     mfInspectorEvents.map((event) => event.runtimeId),
   ).size;
@@ -2398,6 +2538,161 @@ export default function CodeRunnerModal() {
   const mfInspectorIssueCount =
     mfInspectorDifferentRemoteCount + mfInspectorErroredRemoteCount;
   const mfInspectorViewCopy = MF_INSPECTOR_VIEW_COPY[mfInspectorView];
+  const mfInspectorWorkspacePackageMap = new Map<
+    string,
+    {
+      apps: string[];
+      requiredVersions: Array<{ app: string; version: string | false | null }>;
+    }
+  >();
+
+  for (const [filePath, fileContents] of Object.entries(reactFiles)) {
+    const match = filePath.match(/^apps\/([^/]+)\/package\.json$/);
+    if (!match) continue;
+
+    try {
+      const packageJson = JSON.parse(fileContents);
+      const appName = match[1];
+      const dependencyVersions = asInspectorRecord(packageJson.dependencies);
+
+      for (const [packageName, versionValue] of Object.entries(
+        dependencyVersions,
+      )) {
+        const existing = mfInspectorWorkspacePackageMap.get(packageName) ?? {
+          apps: [],
+          requiredVersions: [],
+        };
+
+        if (!existing.apps.includes(appName)) {
+          existing.apps.push(appName);
+        }
+        existing.requiredVersions.push({
+          app: appName,
+          version: typeof versionValue === "string" ? versionValue : null,
+        });
+        mfInspectorWorkspacePackageMap.set(packageName, existing);
+      }
+    } catch {
+      // Ignore malformed package.json edits while the user is typing.
+    }
+  }
+
+  const mfInspectorDeclaredSharedPackageMap = new Map<
+    string,
+    {
+      apps: string[];
+      requiredVersions: Array<{ app: string; version: string | false | null }>;
+      singletonPreferred: boolean;
+    }
+  >();
+
+  for (const [packageName, packageInfo] of mfInspectorWorkspacePackageMap) {
+    mfInspectorDeclaredSharedPackageMap.set(packageName, {
+      apps: [...packageInfo.apps],
+      requiredVersions: [...packageInfo.requiredVersions],
+      singletonPreferred: false,
+    });
+  }
+
+  for (const { app, declaredConfig } of mfInspectorDeclaredConfigs) {
+    const sharedPackages = asInspectorRecord(declaredConfig.shared);
+    for (const packageName of Object.keys(sharedPackages)) {
+      const packageConfig = asInspectorRecord(sharedPackages[packageName]);
+      const existing = mfInspectorDeclaredSharedPackageMap.get(packageName) ?? {
+        apps: [],
+        requiredVersions: [],
+        singletonPreferred: false,
+      };
+
+      if (!existing.apps.includes(app)) {
+        existing.apps.push(app);
+      }
+      existing.requiredVersions.push({
+        app,
+        version:
+          typeof packageConfig.requiredVersion === "string"
+            ? packageConfig.requiredVersion
+            : packageConfig.requiredVersion === false
+              ? false
+              : null,
+      });
+      existing.singletonPreferred =
+        existing.singletonPreferred || packageConfig.singleton === true;
+      mfInspectorDeclaredSharedPackageMap.set(packageName, existing);
+    }
+  }
+
+  const mfInspectorShareScopeNames = Array.from(
+    new Set([
+      ...Object.keys(mfShareScopeForMatrix?.shareScopes ?? {}).filter(
+        (scopeName) => scopeName !== "__error",
+      ),
+      ...(mfInspectorDeclaredSharedPackageMap.size > 0 ? ["default"] : []),
+    ]),
+  );
+  const mfInspectorRuntimeSharedPackageMap = new Map<
+    string,
+    { registeredVersionCount: number; loaded: boolean }
+  >();
+
+  for (const [scopeName, scopeValue] of Object.entries(
+    mfShareScopeForMatrix?.shareScopes ?? {},
+  )) {
+    if (scopeName === "__error") continue;
+    for (const [packageName, versionValue] of Object.entries(
+      asInspectorRecord(scopeValue),
+    )) {
+      const versionEntries = Array.isArray(versionValue) ? versionValue : [];
+      const existing = mfInspectorRuntimeSharedPackageMap.get(packageName) ?? {
+        registeredVersionCount: 0,
+        loaded: false,
+      };
+      existing.registeredVersionCount = Math.max(
+        existing.registeredVersionCount,
+        versionEntries.length,
+      );
+      existing.loaded =
+        existing.loaded ||
+        versionEntries.some(
+          (entry) => asInspectorRecord(entry).loaded === true,
+        );
+      mfInspectorRuntimeSharedPackageMap.set(packageName, existing);
+    }
+  }
+
+  const mfInspectorSharedPackagesByApp = new Map<
+    string,
+    Array<{
+      packageName: string;
+      singletonPreferred: boolean;
+      runtimeRegistered: boolean;
+      runtimeLoaded: boolean;
+    }>
+  >();
+
+  for (const [
+    packageName,
+    packageInfo,
+  ] of mfInspectorDeclaredSharedPackageMap) {
+    for (const appName of packageInfo.apps) {
+      const appPackages = mfInspectorSharedPackagesByApp.get(appName) ?? [];
+      const runtimePackageInfo =
+        mfInspectorRuntimeSharedPackageMap.get(packageName) ?? null;
+      appPackages.push({
+        packageName,
+        singletonPreferred: packageInfo.singletonPreferred,
+        runtimeRegistered: runtimePackageInfo != null,
+        runtimeLoaded: runtimePackageInfo?.loaded === true,
+      });
+      mfInspectorSharedPackagesByApp.set(appName, appPackages);
+    }
+  }
+
+  for (const packages of mfInspectorSharedPackagesByApp.values()) {
+    packages.sort((left, right) =>
+      left.packageName.localeCompare(right.packageName),
+    );
+  }
   const mfInspectorSummaryCards = [
     {
       label: "Host page",
@@ -2442,6 +2737,64 @@ export default function CodeRunnerModal() {
     },
   ];
 
+  const getMfInspectorAppSharedPackages = (appName: string) =>
+    mfInspectorSharedPackagesByApp.get(appName) ?? [];
+
+  const getMfInspectorAppSharedPackageSummary = (appName: string) => {
+    const packages = getMfInspectorAppSharedPackages(appName);
+    const previewItems = packages.slice(0, 2).map((entry) => entry.packageName);
+    const hiddenCount = packages.length - previewItems.length;
+
+    return {
+      count: packages.length,
+      countLabel:
+        packages.length === 1
+          ? "1 shared package"
+          : `${packages.length} shared packages`,
+      previewText:
+        packages.length === 0
+          ? "none declared"
+          : previewItems.join(", ") +
+            (hiddenCount > 0 ? ` +${hiddenCount}` : ""),
+    };
+  };
+
+  const renderMfInspectorPackageBadges = (appName: string) => {
+    const packages = getMfInspectorAppSharedPackages(appName);
+
+    if (packages.length === 0) {
+      return <span className="text-slate-600">none declared</span>;
+    }
+
+    return (
+      <div className="flex flex-wrap gap-1">
+        {packages.map((entry) => {
+          const toneClass = entry.runtimeLoaded
+            ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
+            : entry.runtimeRegistered
+              ? "border-cyan-500/30 bg-cyan-500/10 text-cyan-200"
+              : "border-slate-700 bg-slate-800/50 text-slate-300";
+          return (
+            <span
+              key={`${appName}-${entry.packageName}`}
+              className={`rounded border px-1.5 py-0.5 text-[10px] font-mono ${toneClass}`}
+              title={
+                entry.runtimeLoaded
+                  ? "Seen and loaded at runtime"
+                  : entry.runtimeRegistered
+                    ? "Seen in webpack runtime registry"
+                    : "Declared in package.json but not yet seen at runtime"
+              }
+            >
+              {entry.packageName}
+              {entry.singletonPreferred ? " · one copy" : ""}
+            </span>
+          );
+        })}
+      </div>
+    );
+  };
+
   const renderMfInspectorTruthCell = (
     sameInstance: boolean | null,
     error: string | null,
@@ -3239,7 +3592,7 @@ export default function CodeRunnerModal() {
                       </button>
                     </>
                   )}
-                  {/* React/Next mode: optional URL + Preview button + edit/preview toggle for Next */}
+                  {/* React/Next/Webpack mode controls */}
                   {(clientType === "react" ||
                     clientType === "nextjs" ||
                     clientType === "module-federation") && (
@@ -3252,17 +3605,69 @@ export default function CodeRunnerModal() {
                           {sandboxUrl}
                         </span>
                       )}
-                      {/* React mode: simple preview button */}
+                      {/* React mode: Run Vite OR edit/preview toggle */}
                       {clientType === "react" && (
-                        <button
-                          type="button"
-                          onClick={() => refreshPreview()}
-                          className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-cyan-600/20 hover:bg-cyan-600/40 text-cyan-400 transition-colors shrink-0"
-                          title="Render preview"
-                        >
-                          <Eye className="w-3 h-3" />
-                          Preview
-                        </button>
+                        <>
+                          {!viteSandboxUrl ? (
+                            <button
+                              type="button"
+                              onClick={() => void startViteServer()}
+                              disabled={viteStarting}
+                              className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium bg-cyan-600/20 hover:bg-cyan-600/40 text-cyan-400 disabled:opacity-50 transition-colors shrink-0"
+                              title="Install dependencies and start Vite dev server"
+                            >
+                              {viteStarting ? (
+                                <Loader2 className="w-3 h-3 animate-spin" />
+                              ) : (
+                                <Play className="w-3 h-3" />
+                              )}
+                              {viteStarting ? "Starting…" : "Run Vite"}
+                            </button>
+                          ) : (
+                            <>
+                              <div className="flex items-center rounded overflow-hidden border border-slate-700/50 text-[9px] shrink-0">
+                                <button
+                                  type="button"
+                                  onClick={() => setReactClientTab("edit")}
+                                  className={`flex items-center gap-0.5 px-1.5 py-0.5 transition-colors ${
+                                    reactClientTab === "edit"
+                                      ? "bg-slate-700 text-slate-200"
+                                      : "text-slate-500 hover:text-slate-400"
+                                  }`}
+                                  title="Edit code"
+                                >
+                                  <Code2 className="w-2.5 h-2.5" />
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={() => setReactClientTab("preview")}
+                                  className={`flex items-center gap-0.5 px-1.5 py-0.5 transition-colors ${
+                                    reactClientTab === "preview"
+                                      ? "bg-slate-700 text-slate-200"
+                                      : "text-slate-500 hover:text-slate-400"
+                                  }`}
+                                  title="Live preview"
+                                >
+                                  <Eye className="w-2.5 h-2.5" />
+                                </button>
+                              </div>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  if (viteSandboxId)
+                                    void stopReactLabSandbox(viteSandboxId);
+                                  setViteSandboxId(null);
+                                  setViteSandboxUrl(null);
+                                  setReactClientTab("edit");
+                                }}
+                                className="p-0.5 rounded text-slate-600 hover:text-red-400 transition-colors shrink-0"
+                                title="Stop Vite lab"
+                              >
+                                <StopCircle className="w-3 h-3" />
+                              </button>
+                            </>
+                          )}
+                        </>
                       )}
                       {/* Next.js mode: start real server OR edit/preview toggle */}
                       {clientType === "nextjs" && (
@@ -3383,129 +3788,12 @@ export default function CodeRunnerModal() {
                   )}
                 </div>
 
-                {/* File tabs row (React only — Next.js uses the tree sidebar) */}
-                {clientType === "react" && (
-                  <div className="flex items-center gap-0.5 px-2 py-1 bg-slate-800/40 border-b border-slate-700 shrink-0 overflow-x-auto">
-                    {Object.keys(reactFiles).map((fname) => (
-                      <button
-                        key={fname}
-                        type="button"
-                        onClick={() => {
-                          setReactActiveFile(fname);
-                          setReactClientTab("edit");
-                        }}
-                        className={`flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-mono whitespace-nowrap transition-colors ${
-                          fname === reactActiveFile && reactClientTab === "edit"
-                            ? "bg-slate-900 text-slate-200 border border-slate-600"
-                            : "text-slate-500 hover:text-slate-300 hover:bg-slate-800/50"
-                        }`}
-                      >
-                        {fname.includes("/") ? fname.split("/").pop() : fname}
-                        <span
-                          role="button"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            if (Object.keys(reactFiles).length <= 1) return;
-                            const remaining = Object.keys(reactFiles).filter(
-                              (f) => f !== fname,
-                            );
-                            setReactFiles((prev) => {
-                              const next = { ...prev };
-                              delete next[fname];
-                              return next;
-                            });
-                            if (reactActiveFile === fname)
-                              setReactActiveFile(remaining[0] ?? "");
-                          }}
-                          className="w-3 h-3 flex items-center justify-center text-slate-600 hover:text-red-400 rounded transition-colors"
-                          title="Delete file"
-                        >
-                          <X className="w-2.5 h-2.5" />
-                        </span>
-                      </button>
-                    ))}
-                    {/* Add new file */}
-                    {reactAddingFile ? (
-                      <input
-                        autoFocus
-                        value={reactNewFileName}
-                        onChange={(e) => setReactNewFileName(e.target.value)}
-                        onBlur={() => {
-                          setReactAddingFile(false);
-                          setReactNewFileName("");
-                        }}
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter") {
-                            e.preventDefault();
-                            const name = reactNewFileName.trim();
-                            if (name && !reactFiles[name]) {
-                              setReactFiles((prev) => ({
-                                ...prev,
-                                [name]: newFileContent(name),
-                              }));
-                              setReactActiveFile(name);
-                              setReactClientTab("edit");
-                            }
-                            setReactAddingFile(false);
-                            setReactNewFileName("");
-                          } else if (e.key === "Escape") {
-                            setReactAddingFile(false);
-                            setReactNewFileName("");
-                          }
-                        }}
-                        placeholder="filename.tsx"
-                        className="w-28 bg-slate-900 border border-cyan-600/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-200 placeholder-slate-600 outline-none focus:border-cyan-500"
-                      />
-                    ) : (
-                      <button
-                        type="button"
-                        onClick={() => setReactAddingFile(true)}
-                        className="p-0.5 rounded text-slate-600 hover:text-cyan-400 transition-colors shrink-0"
-                        title="New file"
-                      >
-                        <FilePlus className="w-3 h-3" />
-                      </button>
-                    )}
-                    {/* Edit / Preview tab toggle */}
-                    <div className="ml-auto flex items-center rounded overflow-hidden border border-slate-700/50 text-[9px] shrink-0">
-                      <button
-                        type="button"
-                        onClick={() => setReactClientTab("edit")}
-                        className={`flex items-center gap-0.5 px-1.5 py-0.5 transition-colors ${
-                          reactClientTab === "edit"
-                            ? "bg-slate-700 text-slate-200"
-                            : "text-slate-500 hover:text-slate-400"
-                        }`}
-                        title="Edit code"
-                      >
-                        <Code2 className="w-2.5 h-2.5" />
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          if (!reactPreviewSrc) refreshPreview();
-                          else setReactClientTab("preview");
-                        }}
-                        className={`flex items-center gap-0.5 px-1.5 py-0.5 transition-colors ${
-                          reactClientTab === "preview"
-                            ? "bg-slate-700 text-slate-200"
-                            : "text-slate-500 hover:text-slate-400"
-                        }`}
-                        title="Live preview"
-                      >
-                        <Eye className="w-2.5 h-2.5" />
-                      </button>
-                    </div>
-                  </div>
-                )}
-
                 {/* Client body */}
                 <div
-                  className={`flex-1 min-h-0 ${clientType === "nextjs" || clientType === "module-federation" ? "flex flex-row" : "relative"}`}
+                  className={`flex-1 min-h-0 ${usesClientExplorer ? "flex flex-row" : "relative"}`}
                 >
-                  {/* ── Next.js VS Code-style file tree sidebar ── */}
-                  {(clientType === "nextjs" ||
-                    clientType === "module-federation") && (
+                  {/* ── VS Code-style file tree sidebar ── */}
+                  {usesClientExplorer && (
                     <div className="w-36 shrink-0 flex flex-col border-r border-slate-700 bg-slate-900/60 overflow-y-auto">
                       {/* Sidebar header */}
                       <div className="flex items-center justify-between px-2 py-1.5 border-b border-slate-700/60">
@@ -3546,7 +3834,9 @@ export default function CodeRunnerModal() {
                             placeholder={
                               clientType === "module-federation"
                                 ? "apps/orders/src/App.jsx"
-                                : "app/new.tsx"
+                                : clientType === "nextjs"
+                                  ? "app/new.tsx"
+                                  : "components/NewWidget.tsx"
                             }
                             className="w-full bg-slate-800 border border-cyan-600/50 rounded px-1 py-0.5 text-[9px] font-mono text-slate-200 placeholder-slate-600 outline-none focus:border-cyan-500"
                           />
@@ -3558,7 +3848,9 @@ export default function CodeRunnerModal() {
                             title={
                               clientType === "module-federation"
                                 ? "New file (use paths like apps/orders/src/App.jsx)"
-                                : "New file (use paths like app/dashboard/page.tsx)"
+                                : clientType === "nextjs"
+                                  ? "New file (use paths like app/dashboard/page.tsx)"
+                                  : "New file (use paths like components/Button.tsx)"
                             }
                           >
                             <FilePlus className="w-3 h-3" />
@@ -3751,7 +4043,7 @@ export default function CodeRunnerModal() {
 
                   {/* ── Editor / Preview area ── */}
                   <div
-                    className={`${clientType === "nextjs" || clientType === "module-federation" ? "flex-1 min-w-0 relative" : "absolute inset-0"}`}
+                    className={`${usesClientExplorer ? "flex-1 min-w-0 relative" : "absolute inset-0"}`}
                   >
                     {clientType === "script" ? (
                       <SyntaxEditor
@@ -4047,23 +4339,29 @@ export default function CodeRunnerModal() {
                           </div>
                         )}
                         {((clientType === "module-federation" && mfError) ||
-                          (clientType !== "module-federation" && nxError)) && (
+                          (clientType === "nextjs" && nxError) ||
+                          (clientType === "react" && viteError)) && (
                           <div className="text-[10px] text-red-400 bg-red-950/40 border-b border-red-800 px-3 py-1.5 shrink-0 font-mono">
                             {clientType === "module-federation"
                               ? mfError
-                              : nxError}
+                              : clientType === "react"
+                                ? viteError
+                                : nxError}
                           </div>
                         )}
-                        {(nxStarting || mfStarting) && (
+                        {(nxStarting || mfStarting || viteStarting) && (
                           <div className="flex-1 flex flex-col items-center justify-center gap-3 text-slate-400 text-sm bg-slate-950">
                             <Loader2 className="w-8 h-8 animate-spin text-cyan-400" />
                             <p className="text-[12px]">
                               {clientType === "module-federation"
                                 ? "Installing dependencies and starting webpack apps…"
-                                : "Starting Next.js dev server…"}
+                                : clientType === "react"
+                                  ? "Installing dependencies and starting Vite…"
+                                  : "Starting Next.js dev server…"}
                             </p>
                             <p className="text-[10px] text-slate-600 max-w-md text-center px-4">
-                              {clientType === "module-federation"
+                              {clientType === "module-federation" ||
+                              clientType === "react"
                                 ? "The first run can take a little longer because npm install runs inside the lab sandbox."
                                 : "This takes ~10 seconds on the first run"}
                             </p>
@@ -4129,14 +4427,47 @@ export default function CodeRunnerModal() {
                               </p>
                             </div>
                           )}
-                        {!nxStarting && clientType === "react" && (
-                          <iframe
-                            srcDoc={reactPreviewSrc ?? ""}
-                            sandbox="allow-scripts"
-                            className="flex-1 min-h-0 w-full border-0 bg-white"
-                            title="React Preview"
-                          />
-                        )}
+                        {!viteStarting &&
+                          clientType === "react" &&
+                          viteSandboxUrl && (
+                            <iframe
+                              ref={viteIframeRef}
+                              src={viteSandboxUrl}
+                              className="flex-1 min-h-0 w-full border-0 bg-white"
+                              style={
+                                isDraggingResize
+                                  ? { pointerEvents: "none" }
+                                  : undefined
+                              }
+                              title="React Lab Preview"
+                            />
+                          )}
+                        {!viteStarting &&
+                          clientType === "react" &&
+                          !viteSandboxUrl && (
+                            <div className="flex-1 flex flex-col items-center justify-center gap-3 text-slate-400 text-sm bg-slate-950 px-6 text-center">
+                              <Server className="w-8 h-8 text-cyan-400/70" />
+                              <p className="text-[12px]">
+                                Click{" "}
+                                <span className="text-cyan-400 font-medium">
+                                  Run Vite
+                                </span>{" "}
+                                to install dependencies and start the dev
+                                server.
+                              </p>
+                              <p className="text-[10px] text-slate-600 max-w-md">
+                                Edit{" "}
+                                <code className="text-slate-400">
+                                  package.json
+                                </code>{" "}
+                                to add packages, then use the Console tab to run{" "}
+                                <code className="text-slate-400">
+                                  npm install
+                                </code>
+                                .
+                              </p>
+                            </div>
+                          )}
                       </div>
                     )}
                   </div>
@@ -4183,7 +4514,8 @@ export default function CodeRunnerModal() {
                 ) : null}
                 Output
               </button>
-              {clientType === "module-federation" && (
+              {(clientType === "module-federation" ||
+                clientType === "react") && (
                 <button
                   type="button"
                   onClick={() => setSbxBottomTab("console")}
@@ -4231,9 +4563,10 @@ export default function CodeRunnerModal() {
                 (serverStarting || clientRunning) && (
                   <Loader2 className="w-3 h-3 text-emerald-400 animate-spin mr-1" />
                 )}
-              {sbxBottomTab === "console" && mfConsoleRunning && (
-                <Loader2 className="w-3 h-3 text-cyan-400 animate-spin mr-1" />
-              )}
+              {sbxBottomTab === "console" &&
+                (mfConsoleRunning || viteConsoleRunning) && (
+                  <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
@@ -4282,30 +4615,39 @@ export default function CodeRunnerModal() {
                   </button>
                 </div>
               )}
-              {sbxBottomTab === "console" && mfConsoleOutput.length > 0 && (
-                <div className="flex items-center gap-1 mr-1">
-                  <button
-                    type="button"
-                    onClick={() =>
-                      navigator.clipboard.writeText(
-                        mfConsoleOutput.map((line) => line.text).join("\n"),
-                      )
-                    }
-                    className="p-0.5 rounded text-slate-600 hover:text-slate-300 transition-colors"
-                    title="Copy console output"
-                  >
-                    <Copy className="w-3 h-3" />
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setMfConsoleOutput([])}
-                    className="p-0.5 rounded text-slate-600 hover:text-slate-300 transition-colors"
-                    title="Clear console output"
-                  >
-                    <Trash2 className="w-3 h-3" />
-                  </button>
-                </div>
-              )}
+              {sbxBottomTab === "console" &&
+                (mfConsoleOutput.length > 0 ||
+                  viteConsoleOutput.length > 0) && (
+                  <div className="flex items-center gap-1 mr-1">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const out =
+                          clientType === "react"
+                            ? viteConsoleOutput
+                            : mfConsoleOutput;
+                        navigator.clipboard.writeText(
+                          out.map((line) => line.text).join("\n"),
+                        );
+                      }}
+                      className="p-0.5 rounded text-slate-600 hover:text-slate-300 transition-colors"
+                      title="Copy console output"
+                    >
+                      <Copy className="w-3 h-3" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        if (clientType === "react") setViteConsoleOutput([]);
+                        else setMfConsoleOutput([]);
+                      }}
+                      className="p-0.5 rounded text-slate-600 hover:text-slate-300 transition-colors"
+                      title="Clear console output"
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </button>
+                  </div>
+                )}
               {sbxBottomTab === "chat" && sbxChatMessages.length > 0 && (
                 <button
                   type="button"
@@ -4338,7 +4680,11 @@ export default function CodeRunnerModal() {
                     <span className="text-slate-600">
                       {clientType === "module-federation"
                         ? "Run webpack to start the host and remotes"
-                        : "Start the server, then run the client"}
+                        : clientType === "nextjs"
+                          ? "Start Next.js to launch the live preview"
+                          : clientType === "react"
+                            ? "Click Run Vite to start the dev server"
+                            : "Start the server, then run the client"}
                     </span>
                   )}
                 {sandboxOutput.map((line, i) => (
@@ -4526,9 +4872,11 @@ export default function CodeRunnerModal() {
                             const remoteY = 156;
                             const nodeW = 96;
                             const nodeH = 46;
-                            const svgH = 220;
+                            const svgH = 250;
                             const hostBooted = mfInspectorBootMap.has("host");
                             const hostData = mfInspectorBootMap.get("host");
+                            const hostPackageSummary =
+                              getMfInspectorAppSharedPackageSummary("host");
 
                             const getConnectionStatus = (
                               remoteName: string,
@@ -4716,6 +5064,30 @@ export default function CodeRunnerModal() {
                                       {"▣ DOM " + hostData.reactDomVersion}
                                     </text>
                                   )}
+                                  {hostPackageSummary.count > 0 && (
+                                    <>
+                                      <text
+                                        x={W / 2}
+                                        y={hostY + nodeH / 2 + 16}
+                                        textAnchor="middle"
+                                        fill="#cbd5e1"
+                                        fontSize={8}
+                                        fontFamily="ui-sans-serif, sans-serif"
+                                      >
+                                        {hostPackageSummary.countLabel}
+                                      </text>
+                                      <text
+                                        x={W / 2}
+                                        y={hostY + nodeH / 2 + 27}
+                                        textAnchor="middle"
+                                        fill="#64748b"
+                                        fontSize={7.5}
+                                        fontFamily="ui-monospace, monospace"
+                                      >
+                                        {hostPackageSummary.previewText}
+                                      </text>
+                                    </>
+                                  )}
 
                                   {/* REMOTE nodes */}
                                   {displayRemotes.map((remoteName, i) => {
@@ -4723,6 +5095,10 @@ export default function CodeRunnerModal() {
                                     const status = isPlaceholder
                                       ? "idle"
                                       : getConnectionStatus(remoteName);
+                                    const packageSummary =
+                                      getMfInspectorAppSharedPackageSummary(
+                                        remoteName,
+                                      );
                                     const remoteData =
                                       mfInspectorBootMap.get(remoteName);
                                     const keys =
@@ -4958,6 +5334,30 @@ export default function CodeRunnerModal() {
                                             )}
                                           </g>
                                         )}
+                                        {packageSummary.count > 0 && (
+                                          <g>
+                                            <text
+                                              x={rx}
+                                              y={remoteY + nodeH / 2 + 26}
+                                              textAnchor="middle"
+                                              fill="#cbd5e1"
+                                              fontSize={8}
+                                              fontFamily="ui-sans-serif, sans-serif"
+                                            >
+                                              {packageSummary.countLabel}
+                                            </text>
+                                            <text
+                                              x={rx}
+                                              y={remoteY + nodeH / 2 + 37}
+                                              textAnchor="middle"
+                                              fill="#64748b"
+                                              fontSize={7.5}
+                                              fontFamily="ui-monospace, monospace"
+                                            >
+                                              {packageSummary.previewText}
+                                            </text>
+                                          </g>
+                                        )}
                                       </g>
                                     );
                                   })}
@@ -5036,7 +5436,9 @@ export default function CodeRunnerModal() {
                               <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.
+                                context, or shared-state bugs. The package list
+                                column reflects the current app package.json
+                                files.
                               </div>
                               <div className="rounded-lg border border-slate-800 overflow-hidden">
                                 <table className="w-full text-[11px]">
@@ -5051,6 +5453,9 @@ export default function CodeRunnerModal() {
                                       <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">
+                                        Current shared packages
+                                      </th>
                                       <th className="text-left px-3 py-1.5 text-slate-400 font-medium">
                                         Version seen
                                       </th>
@@ -5066,6 +5471,10 @@ export default function CodeRunnerModal() {
                                           mfInspectorIdentityResultMap.get(
                                             remoteKey,
                                           ) ?? null;
+                                        const remoteAppName =
+                                          result?.remoteApp ??
+                                          remoteKey.split("/")[0] ??
+                                          "unknown";
                                         const loadInfo =
                                           mfInspectorRemoteLoadMap.get(
                                             remoteKey,
@@ -5092,6 +5501,11 @@ export default function CodeRunnerModal() {
                                                 loadInfo?.status ?? null,
                                               )}
                                             </td>
+                                            <td className="px-3 py-2 align-top">
+                                              {renderMfInspectorPackageBadges(
+                                                remoteAppName,
+                                              )}
+                                            </td>
                                             <td className="px-3 py-2 font-mono text-slate-400 text-[10px]">
                                               {result?.reactVersion ??
                                                 (loadInfo?.status ===
@@ -5257,13 +5671,13 @@ export default function CodeRunnerModal() {
                         <>
                           <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
+                              Shared package picture
                             </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.
+                              This tab merges two sources: the packages found in
+                              the current app package.json files in the editor,
+                              and the packages webpack has actually registered
+                              in its live runtime share scope.
                             </p>
                             <p className="mt-1 text-[10px] text-slate-500">
                               Snapshot source:{" "}
@@ -5276,168 +5690,239 @@ export default function CodeRunnerModal() {
                               )}
                             </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>
+                          {mfInspectorShareScopeNames.map((scopeName) => {
+                            const scopeValue =
+                              scopeName === "default"
+                                ? asInspectorRecord(
+                                    mfShareScopeForMatrix.shareScopes.default,
+                                  )
+                                : asInspectorRecord(
+                                    mfShareScopeForMatrix.shareScopes[
+                                      scopeName
+                                    ],
+                                  );
+                            const packageNames = Array.from(
+                              new Set([
+                                ...Object.keys(scopeValue),
+                                ...(scopeName === "default"
+                                  ? Array.from(
+                                      mfInspectorDeclaredSharedPackageMap.keys(),
+                                    )
+                                  : []),
+                              ]),
+                            ).sort((left, right) => left.localeCompare(right));
+
+                            if (packageNames.length === 0) return null;
+
+                            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 w-56">
+                                          Declared by apps
+                                        </th>
+                                        <th className="text-left px-3 py-1.5 text-slate-400 font-medium">
+                                          Versions webpack can reuse
+                                        </th>
+                                      </tr>
+                                    </thead>
+                                    <tbody>
+                                      {packageNames.map((pkgName) => {
+                                        const versionValue =
+                                          scopeValue[pkgName];
+                                        const versionEntries = Array.isArray(
+                                          versionValue,
+                                        )
+                                          ? versionValue
+                                          : [];
+                                        const declaredInfo =
+                                          mfInspectorDeclaredSharedPackageMap.get(
+                                            pkgName,
+                                          ) ?? null;
+                                        const declaredSingleton =
+                                          declaredInfo?.singletonPreferred ===
+                                          true;
+                                        const declaredVersionSummary =
+                                          declaredInfo?.requiredVersions
+                                            .filter(
+                                              ({ version }) => version !== null,
+                                            )
+                                            .map(({ app, version }) =>
+                                              version === false
+                                                ? `${app}: any`
+                                                : `${app}: ${version}`,
+                                            ) ?? [];
+                                        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>
+                                                )}
+                                                {declaredInfo ? (
+                                                  <span className="rounded border border-cyan-500/30 bg-cyan-500/10 px-1 py-0.5 text-[9px] text-cyan-300">
+                                                    from current package.json
+                                                  </span>
+                                                ) : (
+                                                  <span className="rounded border border-slate-700 bg-slate-800/50 px-1 py-0.5 text-[9px] text-slate-500">
+                                                    runtime only
+                                                  </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 align-top">
+                                              {declaredInfo ? (
+                                                <div>
+                                                  <div className="flex flex-wrap gap-1">
+                                                    {declaredInfo.apps.map(
+                                                      (appName) => (
+                                                        <span
+                                                          key={appName}
+                                                          className="rounded border border-slate-700 bg-slate-800/50 px-1.5 py-0.5 text-[9px] text-slate-300 font-mono"
+                                                        >
+                                                          {appName}
+                                                        </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] ${
+                                                  {declaredVersionSummary.length >
+                                                    0 && (
+                                                    <div className="mt-1 text-[9px] text-slate-500 leading-relaxed">
+                                                      required versions:{" "}
+                                                      {declaredVersionSummary.join(
+                                                        ", ",
+                                                      )}
+                                                    </div>
+                                                  )}
+                                                </div>
+                                              ) : (
+                                                <span className="text-slate-600">
+                                                  not declared in current app
+                                                  config
+                                                </span>
+                                              )}
+                                            </td>
+                                            <td className="px-3 py-2.5">
+                                              <div className="flex flex-wrap gap-2">
+                                                {versionEntries.length === 0 ? (
+                                                  declaredInfo ? (
+                                                    <div className="rounded-lg border border-slate-700 bg-slate-800/40 px-2 py-1.5 text-[10px] text-slate-400 leading-relaxed max-w-[22rem]">
+                                                      Declared for sharing, but
+                                                      webpack has not put it in
+                                                      the live runtime registry
+                                                      yet.
+                                                    </div>
+                                                  ) : (
+                                                    <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
-                                                                  ? "border-emerald-500/30 bg-emerald-500/5"
-                                                                  : "border-slate-700 bg-slate-800/40"
+                                                                  ? "bg-emerald-500/20 text-emerald-300"
+                                                                  : "bg-slate-700 text-slate-500"
                                                               }`}
                                                             >
-                                                              <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>
+                                                              {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">
@@ -5533,90 +6018,143 @@ export default function CodeRunnerModal() {
             {sbxBottomTab === "console" && (
               <div className="flex-1 min-h-0 flex flex-col">
                 <div className="shrink-0 border-b border-slate-800 bg-slate-900/70 px-3 py-2 flex items-center gap-2">
-                  <select
-                    value={mfConsoleCwd}
-                    onChange={(e) => setMfConsoleCwd(e.target.value)}
-                    disabled={!mfSandboxId || mfConsoleRunning}
-                    className="bg-slate-950 border border-slate-700 rounded px-2 py-1 text-[11px] font-mono text-slate-200 outline-none disabled:opacity-50"
-                  >
-                    {moduleFederationCommandRoots.map((root) => (
-                      <option key={root} value={root}>
-                        {root === "." ? "root" : root}
-                      </option>
-                    ))}
-                  </select>
+                  {clientType === "module-federation" && (
+                    <select
+                      value={mfConsoleCwd}
+                      onChange={(e) => setMfConsoleCwd(e.target.value)}
+                      disabled={!mfSandboxId || mfConsoleRunning}
+                      className="bg-slate-950 border border-slate-700 rounded px-2 py-1 text-[11px] font-mono text-slate-200 outline-none disabled:opacity-50"
+                    >
+                      {moduleFederationCommandRoots.map((root) => (
+                        <option key={root} value={root}>
+                          {root === "." ? "root" : root}
+                        </option>
+                      ))}
+                    </select>
+                  )}
                   <input
-                    value={mfConsoleCommand}
-                    onChange={(e) => setMfConsoleCommand(e.target.value)}
+                    value={
+                      clientType === "react"
+                        ? viteConsoleCommand
+                        : mfConsoleCommand
+                    }
+                    onChange={(e) =>
+                      clientType === "react"
+                        ? setViteConsoleCommand(e.target.value)
+                        : setMfConsoleCommand(e.target.value)
+                    }
                     onKeyDown={(e) => {
                       if (e.key === "Enter") {
                         e.preventDefault();
-                        void runModuleFederationCommand();
+                        if (clientType === "react") void runViteCommand();
+                        else void runModuleFederationCommand();
                       }
                     }}
-                    disabled={!mfSandboxId || mfConsoleRunning}
-                    placeholder="npm run build"
+                    disabled={
+                      clientType === "react"
+                        ? !viteSandboxId || viteConsoleRunning
+                        : !mfSandboxId || mfConsoleRunning
+                    }
+                    placeholder={
+                      clientType === "react"
+                        ? "npm install <package>"
+                        : "npm run build"
+                    }
                     className="flex-1 bg-slate-950 border border-slate-700 rounded px-2 py-1 text-[11px] font-mono text-slate-200 placeholder-slate-600 outline-none disabled:opacity-50"
                     spellCheck={false}
                   />
                   <button
                     type="button"
-                    onClick={() => void runModuleFederationCommand()}
+                    onClick={() => {
+                      if (clientType === "react") void runViteCommand();
+                      else void runModuleFederationCommand();
+                    }}
                     disabled={
-                      !mfSandboxId ||
-                      mfConsoleRunning ||
-                      !mfConsoleCommand.trim()
+                      clientType === "react"
+                        ? !viteSandboxId ||
+                          viteConsoleRunning ||
+                          !viteConsoleCommand.trim()
+                        : !mfSandboxId ||
+                          mfConsoleRunning ||
+                          !mfConsoleCommand.trim()
                     }
                     className="flex items-center gap-1 px-2.5 py-1 rounded text-[11px] font-medium bg-cyan-600/20 hover:bg-cyan-600/35 text-cyan-300 disabled:opacity-50 transition-colors shrink-0"
                   >
-                    {mfConsoleRunning ? (
+                    {(
+                      clientType === "react"
+                        ? viteConsoleRunning
+                        : mfConsoleRunning
+                    ) ? (
                       <Loader2 className="w-3 h-3 animate-spin" />
                     ) : (
                       <Play className="w-3 h-3" />
                     )}
                     Run
                   </button>
-                  <button
-                    type="button"
-                    onClick={() => void refreshModuleFederationGeneratedFiles()}
-                    disabled={!mfSandboxId || mfConsoleRunning}
-                    className="px-2 py-1 rounded text-[10px] font-medium text-slate-400 hover:text-slate-200 hover:bg-slate-800 disabled:opacity-50 transition-colors shrink-0"
-                  >
-                    Refresh dist
-                  </button>
+                  {clientType === "module-federation" && (
+                    <button
+                      type="button"
+                      onClick={() =>
+                        void refreshModuleFederationGeneratedFiles()
+                      }
+                      disabled={!mfSandboxId || mfConsoleRunning}
+                      className="px-2 py-1 rounded text-[10px] font-medium text-slate-400 hover:text-slate-200 hover:bg-slate-800 disabled:opacity-50 transition-colors shrink-0"
+                    >
+                      Refresh dist
+                    </button>
+                  )}
                 </div>
                 <div className="shrink-0 px-3 py-1.5 text-[10px] text-slate-500 border-b border-slate-800">
-                  Run npm scripts in the selected webpack app. Generated dist
-                  files appear in the explorer as read-only artifacts.
+                  {clientType === "react"
+                    ? "Run npm commands in the React lab — e.g. npm install lodash. Vite HMR reloads automatically."
+                    : "Run npm scripts in the selected webpack app. Generated dist files appear in the explorer as read-only artifacts."}
                 </div>
                 <div className="flex-1 overflow-y-auto px-3 py-2 font-mono text-[12px] leading-relaxed">
-                  {mfConsoleOutput.length === 0 && !mfConsoleRunning && (
-                    <span className="text-slate-600">
-                      {mfSandboxId
-                        ? "Run npm run build in apps/host, apps/profile, or apps/checkout to inspect dist/."
-                        : "Start webpack first, then run npm commands here."}
-                    </span>
-                  )}
-                  {mfConsoleOutput.map((line, index) => (
-                    <div key={index} className="flex items-start gap-2">
-                      <span className="shrink-0 text-[9px] font-bold mt-0.5 w-7 text-right text-cyan-600">
-                        cmd
-                      </span>
-                      <span
-                        className={
-                          line.kind === "stderr"
-                            ? "text-red-400 whitespace-pre-wrap"
-                            : line.kind === "warn"
-                              ? "text-amber-400 whitespace-pre-wrap"
-                              : line.kind === "info"
-                                ? "text-slate-500 italic whitespace-pre-wrap"
-                                : "text-slate-200 whitespace-pre-wrap"
-                        }
-                      >
-                        {line.text}
-                      </span>
-                    </div>
-                  ))}
+                  {(() => {
+                    const out =
+                      clientType === "react"
+                        ? viteConsoleOutput
+                        : mfConsoleOutput;
+                    const running =
+                      clientType === "react"
+                        ? viteConsoleRunning
+                        : mfConsoleRunning;
+                    const sandboxActive =
+                      clientType === "react" ? !!viteSandboxId : !!mfSandboxId;
+                    if (out.length === 0 && !running) {
+                      return (
+                        <span className="text-slate-600">
+                          {sandboxActive
+                            ? clientType === "react"
+                              ? "Run npm install <pkg> to add a package."
+                              : "Run npm run build in apps/host, apps/profile, or apps/checkout to inspect dist/."
+                            : clientType === "react"
+                              ? "Start Vite first, then run npm commands here."
+                              : "Start webpack first, then run npm commands here."}
+                        </span>
+                      );
+                    }
+                    return out.map((line, index) => (
+                      <div key={index} className="flex items-start gap-2">
+                        <span className="shrink-0 text-[9px] font-bold mt-0.5 w-7 text-right text-cyan-600">
+                          cmd
+                        </span>
+                        <span
+                          className={
+                            line.kind === "stderr"
+                              ? "text-red-400 whitespace-pre-wrap"
+                              : line.kind === "warn"
+                                ? "text-amber-400 whitespace-pre-wrap"
+                                : line.kind === "info"
+                                  ? "text-slate-500 italic whitespace-pre-wrap"
+                                  : "text-slate-200 whitespace-pre-wrap"
+                          }
+                        >
+                          {line.text}
+                        </span>
+                      </div>
+                    ));
+                  })()}
                   <div ref={mfConsoleEndRef} />
                 </div>
               </div>