create-interview-cockpit 0.11.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;
@@ -3452,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") && (
@@ -3465,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" && (
@@ -3596,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">
@@ -3759,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"
                           />
@@ -3771,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" />
@@ -3964,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
@@ -4260,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>
@@ -4342,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>
@@ -4396,7 +4514,8 @@ export default function CodeRunnerModal() {
                 ) : null}
                 Output
               </button>
-              {clientType === "module-federation" && (
+              {(clientType === "module-federation" ||
+                clientType === "react") && (
                 <button
                   type="button"
                   onClick={() => setSbxBottomTab("console")}
@@ -4444,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
@@ -4495,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"
@@ -4551,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) => (
@@ -5885,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>